Vuex Flash

Flash message component for Vue.js within Vuex

Features

• multiple flash
• custom template
• persist flash data in storage
• highly customizable

Demo & Example

Live demo with code snippet

Install

$ npm install --save vuex-flash

Usage

register component:

//main.js
 
import Vue from 'vue';
import VuexFlash from 'vuex-flash';
 
Vue.use(VuexFlash);

register vuex store:

//store.js
 
import { createFlashStore } from 'vuex-flash';
 
const store = new Vuex.Store({
  // ...
  plugins: [
    createFlashStore()
  ]
});

Flash data

Using global mixin

Simply put an option mixin: true while registering component, the this.flash method will avaiable in every component

Vue.use(VuexFlash, { mixin: true });

Then in other components:

this.flash({ message: 'some message', variant: 'success' });
this.$router.push('/somepage'); //redirect to /somepage

You can change the method name:

Vue.use(VuexFlash, { mixin: true, method: 'flashMe' });
//now
this.flashMe({ message: 'some message', variant: 'success' });

about global mixin

Using mutation

Instead of global mixin, you can commit mutation from components to set flash message:

methods: {
  //...
  someMethod(){
    //..
    this.$store.commit('FLASH/SET_FLASH', { message: 'some message', variant: 'success' });
  }
}

In mapMutations way:

 
methods: {
  //...
  someMethod(){
    //..
    this.flash({ message: 'some message', variant: 'success' });
  },
 
  ...mapMutations({
    flash: 'FLASH/SET_FLASH'
  })
}

Note that the default mutation type is FLASH/SET_FLASH. You can configure it in options.

Display flash

//in somepage component
 
<template>
  <flash-message variant="success"></flash-message>
  //......
</template>

Multiple flash

this.flash({ message: 'some success message', variant: 'success' });
this.flash({ message: 'some warning message', variant: 'warning' });
this.flash({ message: 'some danger message', variant: 'danger' });
this.$router.push('/somepage'); //redirect to /somepage

//in somepage
<flash-message variant="success"></flash-message>
<flash-message variant="danger"></flash-message>
<flash-message variant="warning"></flash-message>

Props

Name	Type	Default	Desciption
variant	String	-	required prop.the flash variant type
important	Boolean	false	if true, there will no close option of flash alert
autoHide	Boolean	false	auto hide flash alert
transitionName	String	custom-classes-transition	vue transitions name prop More
transitionIn	String	'animated fadeInDown'	space separted string for vue transitions enter-active-class prop More
transitionOut	String	'animated fadeOutUp'	space separted string for vue transitions leave-active-class prop More

Flash alert style

vuex-flash uses Bootstrap v4 alert component as default alert.You need to add bootstrap css file in your head tag.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

You can always use your own alert using custom template.

Variant

The Default variant types are:

• success
• warning
• danger
• info

You can add custom variants.

Transition

vuex-flash uses animate.css as default transition effect.You need to add the css file in your head tag

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">

You can set different animation style using transitionIn and transitionOut props in multiple flash messages:

<flash-message variant="success" transitionIn="animated bounceIn" transitionOut="animated bounceOut"></flash-message>
<flash-message variant="danger" transitionIn="animated flipInX" transitionOut="animated flipOutX"></flash-message>

If you choose to use custom template, then you need to add this feature yourself if you want.

Custom Template

• The default template can be found here.
• Put {{ message }} inside your template where you want to show the flash message.
• Use v-if="show" to show the alert.
• The cssClasses string data will be all classes including variant class and your custom classes that you provide in options. Bind class :class="cssClasses"
• Use closeFlash method to trigger the close button click.
• Here is an example that showing the implementation of custom template of Bulma notification

Persist Flash message

• Here is an example that shows how to persist vuex state in sessionStorage using vuex-persistedstate.
• The path must be same as the namespace.
• The mutataion type in filter must be same as the config mutation key

API

Vue.use(VuexFlash, [options]);

The following options are available to configure the component plugin:

• name [String] - The component name. (default: 'FlashMessage')

• mixin [Boolean] - If true, an global method mixin will register for setting flash data. (default: false)

• method [String] - If mixin is set true and this option is given, then global mixin method will register under this name. (default: 'flash')

• namespace - [String] - The namespace is the name used for creating vuex flash module.This should be same as the createFlashStore namespace. this namespace used for commiting mutation to set and clear flash data. If provided, the mutation type will be '{namespace}/SET_FLASH'. (default: 'FLASH')

• duration [Number] - The flash message display duration (in milliseconds) for auto hide flashes. (default: 3000)

• template [String] - The template to use showing alert. See custom template.

• keep [Boolean] - If false and data is persisted in storage, the storage will cleared after displaying alert every time. if provided, the storage will keep with null value. (default: true)

• storage [Storage] - The Storage where the data is persisted. If keep is set to false, the data will be cleared from this storage. (default: sessionStorage)

• key [String] - The key is used by the store to persist data. (default: '__vuexFlash')

• css [Array] - An array of custom css class names. This is very useful when creating custom template. (default: [])

• variantClass [Function] - A function returns a css class name to styling alert component based on current variant. .Can access the current variant using this.variant. Do not use arrow function.
  (default: function(){ return `alert-${this.variant}`; })

• clearPersisted [Function] - A function used for clearing persisted data from storage when keep is set to false.Can access the storage using this.storage. Do not use arrow function.
  (default: function(){ this.storage.removeItem(this.key); })

createFlashStore([options])

The following options are available to configure the vuex store plugin:

• namespace [String] - This namespace is the name used for registering the vuex-flash store module. (default: 'FLASH')

• setter [String] - This is the mutation name of flash message setter.If provided, the mutation key will be '${namespace}/${setter}'. (default: 'SET_FLASH')

• variants [Array] - An array of Custom variants to use as state.Will be merged with default variants. (default: [])

License

MIT