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:
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