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
.
// If you want to use the default style (with webpack css-loader) Vue Vuex
Put Toast
component anywhere in your application.
<!-- Your contents -->
You can send notifications to the toast component with toast type.
methods: ... { this }
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 IDtext
Text of the toast messagetype
Type of the toast message- You can use any value for styling purpose.
- There are default styles for
info
,success
,warning
, anddanger
dismissAfter
Milli-second that indicates the message dismiss after this time
License
MIT