Home
Notification
Show Toast Messages In Order – vue-toast-notification

Show Toast Messages In Order – vue-toast-notification

ankurk91 Last Updated: 4 months ago

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:

Show Toast Messages In Order - vue-toast-notification

Changelog:

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

Download Details:

Author: ankurk91

Live Demo: https://ankurk91.github.io/vue-toast-notification/

Download Link: https://github.com/ankurk91/vue-toast-notification/archive/master.zip

Official Website: https://github.com/ankurk91/vue-toast-notification

Install & Download:

# Yarn
$ yarn add vue-toast-notification

# NPM
$ npm install vue-toast-notification --save

Related Posts

Tags:

Add Comment