vuex-toast

0.1.3 • Public • Published

Vuex Toast

Simple toast notification using Vuex

Requirements

  • Vue >= 2.0
  • Vuex >= 2.0

Demo

http://codepen.io/ktsn/pen/Bzxkjd

Example

First, you should register a toast module to your Vuex store. You can use a default style at dist/vuex-toast.css.

import Vue from 'vue'
import Vuex from 'vuex'
import { createModule } from 'vuex-toast'
 
// If you want to use the default style (with webpack css-loader)
import 'vuex-toast/dist/vuex-toast.css'
 
Vue.use(Vuex)
 
export default new Vuex.Store({
  modules: {
    // ...
    toast: createModule({
      dismissInterval: 8000
    })
    // ...
  }
})

Put Toast component anywhere in your application.

<template>
  <div>
    <article><!-- Your contents --></article>
    <toast position="ne"></toast>
  </div>
</template>
 
<script>
import { Toast } from 'vuex-toast'
 
export default {
  // ...
  components: {
    Toast
  }
  // ...
}
</script> 

You can send notifications to the toast component with toast type.

import { mapActions } from 'vuex'
import { ADD_TOAST_MESSAGE } from 'vuex-toast'
 
export default {
  methods: {
    ...mapActions({
      addToast: ADD_TOAST_MESSAGE
    }),
 
    sendNotification(text) {
      this.addToast({
        text,
        type: 'success',
        dismissAfter: 10000
      })
    }
  }
}

API

Toast

A Vue component that shows toast messages.

  • props
    • position
    • html
    • namespace
      • Vuex module's namespace if you install toast module into some namespaced module.

createModule(options): VuexModule

Create Vuex module for managing toast messages.

  • options
    • dismissInterval

createComponent(options): VueComponent

Create customized toast component.

  • options
    • transition

Action Types

  • ADD_TOAST_MESSAGE
    • dispatch(ADD_TOAST_MESSAGE, { text, type, dismissAfter })
  • REMOVE_TOAST_MESSAGE
    • dispatch(REMOVE_TOAST_MESSAGE, messageId)

Getters

  • toastMessage
    • get all toast messages.

Toast Message Type

  • id Auto generated message ID
  • text Text of the toast message
  • type Type of the toast message
    • You can use any value for styling purpose.
    • There are default styles for info, success, warning, and danger
  • dismissAfter Milli-second that indicates the message dismiss after this time

License

MIT

Versions

Current Tags

VersionDownloads (Last 7 Days)Tag
0.1.3366latest

Version History

VersionDownloads (Last 7 Days)Published
0.1.3366
0.1.20
0.1.11
0.1.00
0.0.30
0.0.23
0.0.13

Package Sidebar

Install

npm i vuex-toast

Weekly Downloads

373

Version

0.1.3

License

MIT

Unpacked Size

21.5 kB

Total Files

7

Last publish

Collaborators

  • ktsn