Vuex Flash

Flash message component for Vue.js within Vuex

$3

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

$3

#### Live demo with code snippet

$3

``
$ npm install --save vuex-flash
`

$3

register component:
`javascript
//main.js

import Vue from 'vue';
import VuexFlash from 'vuex-flash';

Vue.use(VuexFlash);
`

register vuex store:
`javascript
//store.js

import { createFlashStore } from 'vuex-flash';

const store = new Vuex.Store({
// ...
plugins: [
createFlashStore()
]
});
`

$3

##### Using global mixin

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

`javascript
Vue.use(VuexFlash, { mixin: true });
`
Then in other components:

`javascript
this.flash({ message: 'some message', variant: 'success' });
this.$router.push('/somepage'); //redirect to /somepage
`
You can change the method name:
`javascript
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:

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

`javascript

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.

$3

`javascript
//in somepage component


`

$3

`javascript
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
`
`javascript
//in somepage



`

$3

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

`html

`

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

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


`

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

$3

- 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

$3

- 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

$3

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); })




$3

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: [])`

$3

MIT