Why use it?
- Small: 1.5kb (minified & gzipped), 4kb (minified)
- Simple
this.$notify({message:'My message'})
- Has multiple themes
- The animations can be customized through Vue transitions
- Can be used both through npm and as a script tag
- jsFiddle demo
- Overlaping notifications
- Custom html content via components
- Custom animations
- Clears all current notifications
yarn add vue-notifyjs
- https://unpkg.com/vue-notifyjs/dist/vue-notifyjs.min.js
- https://unpkg.com/vue-notifyjs/dist/vue-notifyjs.js
- https://unpkg.com/vue-notifyjs/themes/default.css
- https://unpkg.com/vue-notifyjs/themes/material.css
- https://unpkg.com/vue-notifyjs/themes/now-ui.css
<template>
<notifications></notifications>
</template>
<script>
import Notify from 'vue-notifyjs'
Vue.use(Notify)
export default {
methods: {
addNotification() {
this.$notify({
message: 'Welcome',
type: 'success'
})
}
}
}
</script>
<!-- import styles -->
<style src="vue-notifyjs/themes/default.css"></style>
import Vue from 'vue'
import App from './App'
import Notify from 'vue-notifyjs';
import Vuex from "vuex"
Vue.use(Notify)
Vue.use(Vuex)
let notifier = new Vue()
const store = new Vuex.Store({
state:{},
actions:{
notify(context, payload){
notifier.$notify(payload)
}
}
})
new Vue({
el: '#app',
store,
template: '<App/>',
components: { App }
})
Now you can dispatch an action like so
this.$store.dispatch('notify', {
message: 'Welcome!',
type: 'success',
});
Note: <notifications></notifications>
can be declared only once anywhere in your app,
preferably in your root component so the notification component is alive inside any other components.
You can set notification options in 3 ways
- Upon plugin initialization
import Notify from 'vue-notifyjs'
Vue.use(Notify, {type: 'primary', timeout: 2000})
- Dynamically via
setOptions
method
this.$notifications.setOptions({
type: 'primary',
timeout: 2000,
horizontalAlign: 'right',
verticalAlign: 'top'
})
- When using
$notify
this.$notify({
message: 'Welcome',
type: 'success'
})
Note: Options sent through this.$notify
will override default options and will have higher priority than default options.
transitionName: {
type:String,
default:'list'
},
transitionMode: {
type:String,
default:'in-out'
},
overlap: {
type: Boolean,
default: false
}
props: {
message: String,
title: String,
icon: String,
verticalAlign: {
type: String,
default: 'top' // top | bottom
},
horizontalAlign: {
type: String,
default: 'center' // right | center | left
},
type: {
type: String,
default: 'info' // info | warning | danger | success | primary
},
timeout: {
type: Number,
default: 5000
},
timestamp: {
type: Date,
default: () => new Date()
},
component: { //is rendered instead of notification message
type: [Object, Function]
},
showClose: {
type: Boolean,
default: true
},
closeOnClick: {
type: Boolean,
default: true
},
clickHandler: Function,
},
clear() - Clears all current notifications
this.$notifications.clear();
- Fork it!
- Create your feature branch:
git checkout -b my-new-feature
- Commit your changes:
git commit -am 'Add some feature'
- Push to the branch:
git push origin my-new-feature
- Submit a pull request :D