Vuejs Flash Message Component within Vuex

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

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

What is GEEK

Buddha Community

Hire Dedicated VueJS Developers

Want to Hire VueJS Developer to develop an amazing app?

Hire Dedicated VueJS Developers on the contract (time/project) basis providing regular reporting about your app. We, at HourlyDeveloper.io, implement the right strategic approach to offer a wide spectrum of vue.js development services to suit your requirements at most competitive prices.

Consult with us:- https://bit.ly/2C5M6cz

#hire dedicated vuejs developers #vuejs developer #vuejs development company #vuejs development services #vuejs development #vuejs developer

Vuejs Flash Message Component within Vuex

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

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

5 Rules to Follow When Using the Vuex Store in Components

Almost everyone who has worked on a legacy application has at least once uttered the words, “Where is that coming from?!” while trying to figure out where a change to a variable originated. Unfortunately, this is not only limited to legacy applications, it is very easy to write unscalable code using modern tools. I am going to outline 5 rules I follow when creating maintainable components that make use of the Vuex store.

A working knowledge of Vuex is required to fully appreciate the rules.

We will be using the example below to illustrate the 5 points. The example shows a delivery address component that has the capability to edit the first line of the address. We will not include anything to do with errors as it’s just a different logic branch and the same principles will still apply.

#vuex #vue-component #vuejs #javascript

Laravel, VueJs and Vuex: Search component with Pagination

Laravel, VueJs and Vuex: Search component with Pagination (Part 1)

In this screencast we will look at building a search component with pagination using Laravel, VueJs, Vuex and sessionStorage to filter the returned list of results.

Laravel, VueJs and Vuex: Search component with Pagination (Part 2)

In this, second part of the screencast we will continue building a search component with pagination using Laravel, VueJs, Vuex and sessionStorage.

#vuejs #vue #laravel #vuex #webdev

How to Publish a Vuejs Component on NPM

In this post, I will explain you now how to publish your own VueJs component on npm with a minify and ES5 build.

#vuejs-development #vuejs-2 #vuejs #github #npm