Material Toast Plugin For Vue.js – vue-toasted

// register the plugin on vue import Toasted from 'vue-toasted';  Vue.use(Toasted)  // you can also pass options, check options reference below Vue.use(Toasted, Options) 

// you can call like this in your component this.$toasted.show('hello billo')  // and also Vue.toasted.show('hola billo');

{     // pass the icon name as string     icon : 'check'          // or you can pass an object     icon : {         name : 'watch',         after : true // this will append the icon to the end of content     } }

{     // you can pass a single action as below     action : {         text : 'Cancel',         onClick : (e, toastObject) => {             toastObject.goAway(0);         }     },      // you can pass a multiple actions as an array of actions     action : [         {             text : 'Cancel',             onClick : (e, toastObject) => {                 toastObject.goAway(0);             }         },         {             text : 'Undo',             // router navigation             push : {              	name : 'somewhere',             	// this will prevent toast from closing             	dontClose : true              }         }     ] }

// you can pass string or html to message Vue.toasted.show( 'my message', { /* some option */ })

// html element of the toast el : HtmlElement  // change text or html of the toast text : Function(text)  // fadeAway the toast. default delay will be 800ms goAway : Function(delay = 800) 

let myToast = this.$toasted.show("Holla !!"); myToast.text("Changing the text !!!").goAway(1500);

// your app router instance var router = new VueRouter({ 	mode: 'history', 	routes: [{ 		path: '/foo', 		name : 'foo-name' 	}], 	linkActiveClass: "active" });  // pass it to vue toasted as below.. Vue.use(Toasted, { 	router });

import Toasted from 'vue-toasted'; Vue.use(Toasted);  // Lets Register a Global Error Notification Toast. Vue.toasted.register('my_app_error', 'Oops.. Something Went Wrong..', {     type : 'error',     icon : 'error_outline' })

// this will show a toast with message 'Oops.. Something Went Wrong..' // all the custom toasts will be available under `toasted.global` this.$toasted.global.my_app_error();

this.$toasted.global.my_app_error({     message : 'Not Authorized to Access' });

import Toasted from 'vue-toasted'; Vue.use(Toasted);  // options to the toast let options = {     type : 'error',     icon : 'error_outline' };  // register the toast with the custom message Vue.toasted.register('my_app_error',     (payload) => { 		         // if there is no message passed show default message         if(! payload.message) {     	    return "Oops.. Something Went Wrong.."         } 		         // if there is a message show it with the message         return "Oops.. " + payload.message;     },     options )