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:

Show Toast Messages In Order - vue-toast-notification

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

Last Update: November 29, 2019

Install:

# Yarn
$ yarn add vue-toast-notification

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

You Might Be Interested In:

Tags:

Add Comment