vuex-toast
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 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
Dependencies
autoprefixer: ^8.0.0babel-core: ^6.26.0babel-eslint: ^8.2.1babel-loader: ^7.1.2babel-plugin-transform-flow-strip-types: ^6.22.0babel-plugin-transform-object-rest-spread: ^6.26.0babel-preset-es2015: ^6.24.1babel-preset-power-assert: ^2.0.0cross-env: ^5.1.3css-loader: ^0.28.9eslint: ^4.17.0eslint-config-ktsn: ^1.0.3eslint-plugin-flowtype: ^2.44.0eslint-plugin-html: ^4.0.2flow-bin: ^0.65.0node-sass: ^4.7.2postcss: ^6.0.18power-assert: ^1.4.4rollup: ^0.56.0rollup-plugin-babel: ^3.0.3rollup-plugin-replace: ^2.0.0rollup-plugin-vue: ^3.0.0sass-loader: ^6.0.6style-loader: ^0.20.2uglifyjs: ^2.4.11vue: ^2.5.13vue-loader: ^14.1.1vue-template-compiler: ^2.5.13vuex: ^3.0.1webpack: ^3.11.0webpack-dev-server: ^2.11.1