vue-flash-message
Simple yet flexible vue flash alert message component. It is made to display a list of messages and give individual control over each instance and global message storage. Component is inspired by old goodies as jGrowl.
Demo & Example
Live demo
Install
npm install --save vue-flash-messageConfiguration
import Vue from 'vue'; import VueFlashMessage from 'vue-flash-message'; Vue.use(VueFlashMessage);You can rename default flash method via options:
Vue.use(VueFlashMessage, { method: 'iPreferQuickSilver' });Usage
Output flash message pool and configure transitions.
<flash-message class="myCustomClass"></flash-message>(Optional) Include pre defined basic css.
require('vue-flash-message/dist/vue-flash-message.min.css');Emit flash messages from any component with a flash (or custom named) method.
this.flash('Data loaded', 'success'); this.flash('Validation failed', 'error'); this.flash('Spawning too much alerts is a bad UX', 'warning'); this.flash('Live long and prosper', 'info');Shortcut methods
You can also use shortcut methods to output common message types
this.flashSuccess('Data loaded'); this.flashError('Validation failed'); this.flashWarning('Spawning too much alerts is a bad UX'); this.flashInfo('Live long and prosper');You if you don't want to spoil your components with these methods, you can switch them off by using createShortcuts config option.
Vue.use(VueFlashMessage, { createShortcuts: false, });Usage with options
this.flash('Hello World', 'success', { timeout: 3000, beforeDestroy() { alert('oh no, not again!'); } });Options
| Name | Type | Default | Desciption |
|---|---|---|---|
| timeout | Number | 0 | Number in milliseconds until message self destruct |
| important | Boolean | false | Defines if message has a close button. |
| autoEmit | Boolean | true | Defines if message should be emitted immediately after calling flash method |
| pauseOnInteract | Boolean | false | Defines if message destruct timer should be paused on user interaction |
| beforeDestroy | Function | - | Fires bofore message is destroyed |
| onStartInteract | Function | - | Fires on user interact with message element |
| onCompleteInteract | Function | - | Fires on user complete interaction with message element |
Props
| Name | Type | Default | Desciption |
|---|---|---|---|
| transitionName | String | custom-classes-transition | vue transitions name |
| outerClass | String | 'flash__wrapper' | outer class name |
Passing global message options
Vue.use(VueFlashMessage, { messageOptions: { timeout: 1000, important: true, autoEmit: false, pauseOnInteract: true } });API
Flash method returns message object giving you full controll over it's contents, options and lifecycle.
const myMessage = this.flash('My message', 'info');| Method | Desciption |
|---|---|
| emit() | Adds message to global storage. Helpfull when message is created with autoEmit: false |
| destroy() | Destroys message |
| getStorage() | Returns global flash message storage object |
| setSelfDestructTimeout(timeout) | Sets message self destruct timer value (in milliseconds) |
| startSelfDestructTimer() | Starts self destruct timer |
| killSelfDestructTimer() | Stops self destruct timer |
Calling flash method with no arguments will return flash storage object.
const messageStorage = this.flash();| Method | Desciption |
|---|---|
| flash(...) | Same as this.flash method, except it does not return storage instance |
| push(id, message) | Adds message object to storage with id key |
| destroy(id) | Destroys message by given id |
| destroyAll() | Destroys all messages |
Vuex usage
You can access flash message storage object directly from Vue prototype:
Vue.prototype.$flashStorage.flash(...); License
Vue-Flash-Message is open-sourced software licensed under the MIT license.
