vue-roast

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.