Vuejs Flash Message Component within Vuex

Vuejs Flash Message Component within Vuex

Vuex Flash Flash message component for Vue.js within Vuex

Vuex Flash

Flash message component for Vue.js within Vuex

Features

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

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

Download Details:

Author: ahmed-dinar

Demo: https://ahmed-dinar.github.io/vuex-flash/

Source Code: https://github.com/ahmed-dinar/vuex-flash

vue vuejs javascript

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

8 Popular Websites That Use The Vue.JS Framework

In this article, we are going to list out the most popular websites using Vue JS as their frontend framework. Vue JS is one of those elite progressive JavaScript frameworks that has huge demand in the web development industry. Many popular websites are developed using Vue in their frontend development because of its imperative features.

Vue Native is a framework to build cross platform native mobile apps using JavaScript

Vue Native is a framework to build cross platform native mobile apps using JavaScript. It is a wrapper around the APIs of React Native. So, with Vue Native, you can do everything that you can do with React Native. With Vue Native, you get

How to Make a Simple Vue Custom Select Component

In this article, you’ll learn how to build a Vue custom select component that can be easily be styled using your own CSS. In fact, it’s the same component that we use in production on Qvault, and you can see it in action on the playground.

Creating a Custom Tooltip Component in Vue

There are plenty of libraries out there that will have you up and running with a good tooltip solution in minutes. However, if you are like me, you are sick and tired of giant dependency trees that have the distinct possibility of breaking at any time.

Vue ShortKey plugin for Vue.js

Vue-ShortKey - The ultimate shortcut plugin to improve the UX .Vue-ShortKey - plugin for VueJS 2.x accepts shortcuts globaly and in a single listener.