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

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 | 'flashwrapper' | 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.