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

``bash
npm install --save vue-flash-message
`

Configuration

`javascript
import Vue from 'vue';
import VueFlashMessage from 'vue-flash-message';
Vue.use(VueFlashMessage);
`
You can rename default flash method via options:
`javascript
Vue.use(VueFlashMessage, { method: 'iPreferQuickSilver' });
`

Usage

Output flash message pool and configure transitions.
`html

`

(Optional) Include pre defined basic css.
`javascript
require('vue-flash-message/dist/vue-flash-message.min.css');
`

Emit flash messages from any component with a flash (or custom named) method.
`javascript
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
`javascript
this.flashSuccess('Data loaded');
this.flashError('Validation failed');
this.flashWwarning('Spawning too much alerts is a bad UX');
this.flashIinfo('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.
`javascript
Vue.use(VueFlashMessage, {
createShortcuts: false,
});
`

Usage with options

`javascript
this.flash('Hello World', 'success', {
timeout: 3000,
beforeDestroy() {
alert('oh no, not again!');
}
});
`

$3

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

$3

| Name | Type | Default | Desciption |
| ---: | :---: | :---: | :--- |
| transitionName | String | custom-classes-transition | vue transitions name |
| outerClass | String | 'flash__wrapper' | outer class name |

Passing global message options

`javascript
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.
`javascript
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.
`javascript
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.