Show Toast Messages In Order – vue-toast-notification

Description:

Yet another Vue 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 Vue from 'vue';
import VueToast from 'vue-toast-notification';
import 'vue-toast-notification/dist/index.css';

2. Register the component.

Vue.use(VueToast);

3. Display a basic toast message on the screen.

Vue.$toast.open('Basic Toast Message');

4. Change the notification type. All possible types:

• success
• info
• warning
• error
• default

Vue.$toast.open({
  message: 'Error Message',
  type: 'error'
});

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

5. Change the position of toast messages.

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

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

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

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

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

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

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

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

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

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

Preview:

Changelog:

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

You Might Be Interested In: