🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

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

Notification

Documentation

Vue.js plugin for easy display of toast messages.

Demo

Install

Via npm

npm i vue-roast

Register plugin

import VueRoast from 'vue-roast';  Vue.use(VueRoast, config);

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']

API

In component:

this.$toast(message, options);

Outside of component

Vue.toast(message, options);

Message

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

Options

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

Tests

npm test

Contributing

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


You May Also Like