npm

// 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
)