Easy Toaster Plugin For Vue.js – vue-roast

Easy Toaster Plugin For Vue.js – vue-roast

Yet another Vue.js toaster plugin used to display toast messages on the app.

Vue.js plugin for easy display of toast messages.



Via npm

npm i vue-roast

Register plugin

import VueRoast from 'vue-roast';

Vue.use(VueRoast, config);


Prop Type Description Default Possible
ttl Number Default toast message ttl 5000
threshold Number | Boolean Max number of displayed toasts at a time (false to disable) 3
position String Position of toast messages 'bottom-left' ['top', 'bottom'] - ['left', 'middle', 'right']


In component:

this.$toast(message, options);

Outside of component

Vue.toast(message, options);


Prop Type Default Possible
title String ''
body String ''
footer String ''
level String 'info' ['info', 'warning', 'error']


Prop Type Description
ttl Number Toast message display time in miliseconds
truncateAfter Number Max message char length to display
action Object Action triggered on toast click
action.placeholder String Action placeholder
action.method String Method to be invoked on click


npm test


Please follow selected coding style guide. Add unit tests for any new or changed functionality. Lint and test your code.

Github Repository

Tags: #VueJs