Vue Hot Toast - A neat toast for vue3

Cooked by Steve Yu👨🏼‍🍳

Features

• Simplicity and Ease of Use: Just loading / success / error

• Toast Updating Capability: Vue Hot Toast allows you to update existing toast messages dynamically using a toast ID.

• Promise Handling: Display loading, success, and error toasts based on the resolution of your promises.

Installation

• pnpm

pnpm install @steveyuowo/vue-hot-toast

• npm

npm install @steveyuowo/vue-hot-toast

Documentation

This documentation provides a clear and concise overview of how to use the Vue Hot Toast library to display toast notifications in a Vue application. By following the examples provided, developers can quickly implement toast notifications in their projects and customize them to fit their requirements.

1. Simple Usage

To get started with Vue Hot Toast, import the Toaster and toast objects from @steveyuowo/vue-hot-toast and include the necessary CSS file for styling the toasts.

<script setup lang="ts">
import { Toaster, toast } from "@steveyuowo/vue-hot-toast";
import "@steveyuowo/vue-hot-toast/vue-hot-toast.css";
</script>
<template>
  <button
    @click="
      toast.success('Execution Success!');
    "
  >
    Success
  </button>
  <button
    @click="
      toast.loading('Loading...');
    "
  >
    Loading
  </button>
  <button
    @click="
      toast.error('Execution Error!');
    "
  >
    Error
  </button>
  <Toaster />
</template>

2. Passing Options

You can pass options to the toast function to customize the appearance and behavior of the toast message.

toast({
  message: 'Execution Success!',
  type: 'success',
});

If you need to change positions, you can pass position like so:

toast({
  message: 'Success',
  type: 'success',
  position: 'top-right',
})

3. Updating Toasts

You can pass options to the toast function to customize the appearance and behavior of the toast message.

const id = toast.loading("Loading...")
setTimeout(() => {
  toast.update(id, {
    type: "success",
    message: "Execution Success!"
  })
}, 1000)

4. Promise API

Vue Hot Toast provides a promise method to handle promise states and show corresponding toast messages for loading, success, and error states.

toast.promise(yourPromise, {
  success: 'Success!',
  error: 'Error!',
  loading: 'Loading!',

  // Optional: Pass position here to change positioning on webpage
  position: 'top-right',
});

// random loading => success/error by promise api
toast.promise(new Promise((resolve, reject) => {
  setTimeout(() => {
    const random =Math.floor( Math.random() * 100);
    if(random > 90) {
      reject(new Error('An error occurred after 1 seconds'));
    } else {
      resolve("success")
    }
  }, 1000);
}), {
  success: 'Success!',
  error: 'Error!',
  loading: 'Loading!',

  // Optional: Use position here to change positioning
  position: 'top-right'
})

With the promise method, you can easily handle promise states and provide user feedback on the progress of async operations in a declarative manner.