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-message
Configuration
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.