Simple Vue Flash Alert Message Component

Simple Vue Flash Alert Message Component

A simple vue flash alert message component.

vue-flash-message

npm NpmLicense Awesome

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.

Buy Me A Coffee

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.

Github Repository

Tags: #VueJs