Show Toast Messages In Order – vue-toast-notification

Install & Download:

# Yarn
$ yarn add vue-toast-notification
# NPM
$ npm install vue-toast-notification --save

Description:

Yet another Vue 3 toast component to display customizable toast messages in order. This means that the new messages will be queued until the previous ones are hidden.

How to use it:

1. Install and import the vue-toast-notification.

import {createApp} from 'vue';
import VueToast from 'vue-toast-notification';
import 'vue-toast-notification/dist/theme-default.css';
// import 'vue-toast-notification/dist/theme-sugar.css';

2. Register the component.

const app = createApp({});
app.use(VueToast);
app.mount('#app');

3. Display a basic toast message on the screen.

let instance = app.$toast.open('Basic Toast');

4. Change the notification type. All possible types:

• success
• info
• warning
• error
• default

let instance = app.$toast.open({
  message: 'Error Message',
  type: 'error'
});

// or
app.$toast.success(message,?options)
app.$toast.error(message,?options)
app.$toast.warning(message,?options)
app.$toast.info(message,?options)
app.$toast.default(message,?options)

5. Change the position of toast messages.

• top
• bottom
• top-right (default)
• bottom-right
• top-left
• bottom-left

app.$toast.open({
  message: 'Error Message',
  position: 'top-right'
});

6. Set the time to wait before auto-dismissing the toast message. Default: 3 seconds.

app.$toast.open({
  message: 'Error Message',
  duration: '3000'
});

7. Determine if the toast message is closable. Default: true.

app.$toast.open({
  message: 'Error Message',
  dismissible: false
});

8. Determine if the toast messages should be queued. Default: false.

app.$toast.open({
  message: 'Error Message',
  queue: true
});

9. Execute a function when you click/tap the toast message.

app.$toast.open({
  message: 'Error Message',
  onClick: FUNCTION
});

10. Execute a function when the toast has been dismissed.

app.$toast.open({
  message: 'Error Message',
  onDismiss: FUNCTION
});

11. More API methods.

// Force dismiss specific toast
instance.dismiss();
// Dismiss all opened toast immediately
app.$toast.clear();

Preview:

Changelog:

v3.1.2 (10/30/2023)

• Fix: issue with z-index

v3.1.1 (03/11/2023)

• Fix: warning must have dark text color

v3.1.0 (03/10/2023)

• Add bootstrap theme
• Introduce $toast-icons-path scss variable

v3.0.4 (05/21/2022)

• Bugfix

v3.0.2 (05/06/2022)

• Bugfix

v3.0.1 (05/01/2022)

• Add missing type for typescript usage

v3.0.0 (12/24/2021)

• Allow Composition API usage
• Use named export in browser environment

v2.0.1 (08/30/2021)

• Fix: Composition API usage

v2.0.0 (08/30/2021)

• Drop support for Vue 2.x, add support for Vue 3.x
• Drop Internet Explorer support

v0.6.2 (05/30/2021)

• Fix: SSR issue

v0.6.1 (02/15/2021)

• Add ability to keep toast opened

v0.6.0 (09/21/2020)

• Rename close() method to dismiss()
• Rename onClose prop to onDismiss
• Using BEM naming convention in CSS classes

v0.5.4 (09/21/2020)

• Bugfix

v0.5.3 (09/20/2020)

• Bugfix

v0.5.0 (08/08/2020)

• Bugfix
• CSS classes has been prefixed with v-, if you were overriding any css class then revisit your code

v0.4.1 (06/25/2020)

• Bugfix