vue-toast

Toasts for Vue 2. (Vue 1)

How does it work? Look it here.

Usage

Install:

npm i vue-toast 

Import:

import 'vue-toast/dist/vue-toast.min.css' import VueToast from 'vue-toast'  new Vue({   template: "<div> <vue-toast ref='toast'></vue-toast> </div>",   components: { VueToast },   mounted() {     const toast = this.$refs.toast      toast.showToast('Show me toast')     toast.showToast('Show me toast again!')   } }) 

Global

<link rel="stylesheet" href="./path/to/vue-toast.min.css" charset="utf-8"> <script src='./path/to/vue-toast.min.js'></script> // it available in window.vueToasts.default 

API

• showToast(string, {}) - main function that generates toast with some settings of instance toast and shows him.
• setOptions({}) - function for changing settings of component.
• closeAll() - function for close all toasts.

Settings

Function setOptions({}) lets to change settings of component.

• position {String} position of component | default: 'left bottom' | possible '[left, right] [top, bottom]'
• maxToasts {Number} max toasts number | default: 6

Function showToast(string, {}) lets to change settings of current toast.

• theme {String} style for toast | default: default | possible: info warning error success
• timeLife {Number} time of life for current toast
• closeBtn {Boolean} turn off|on button for close toast and disabled|enabled "timeLife"

Example

Look here.