vue-toasted

// register the plugin on vue
import Toasted from 'vue-toasted';

// or you can use it with require
var Toasted = require('vue-toasted').default

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
)