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.