Notification library for Vue.js
Vue.js notifications
Vue.js notifications is a small library to add notifications with CSS & Velocity animations.
Take a look at the Live Demo.
The example below is making use of different kinds of notifications separated in groups.
Example
To start working with Vue.js Notification, use the following command to install it.
npm install --save vue-notification
OR
yarn add vue-notification
If used as a global component
import Vue from 'vue'
import Notifications from 'vue-notification'
Vue.use(Notifications)
In *.vue
<notifications group="foo" />
In any of your files:
this.$notify({
group: 'foo',
title: 'Important message',
text: 'Hello user! This is a notification!'
});
The above example has a single notification. If you would like to use more, you can create groups for different uses.
<notifications group="foo" position="top center" max="3"/>
<notifications group="app" position="bottom right" width="400"/>
<button @click="notify">What's this?</button>
<button @click="clear">Clear</button>
<button @click="notificate">Ask permission to go out</button>
Two different groups with different positions and props.
Props
- group: Name of the notification holder, if specified
- width: Width of notification holder, can be %, px string or number. Valid values: '100%', '200px', 200
- position: Part of the screen where notifications will pop out
- max: Maximum number of notifications that can be shown in notification holder and more available here.
API
this.$notify({
// (optional)
// Name of the notification holder
group: 'foo',
// (optional)
// Class that will be assigned to the notification
type: 'warning',
// (optional)
// Title (will be wrapped in div.notification-title)
title: 'This is title',
// Content (will be wrapped in div.notification-content)
text: 'This is <b> content </b>',
// (optional)
// Overrides default/provided duration
duration: 10000,
// (optional)
// Overrides default/provided animation speed
speed: 1000
})
Title and Text can be HTML strings. Also you can use simplified version:
this.$notify('text')
To activate the groups you can set up different methods with different types, texts, durations & speeds, like for system messages and actions for example.
<script>
export default {
methods: {
clear () {
// remove all notifications
this.$notify({
group: 'foo',
clean: true
})
},
notify () {
this.$notify({
group: 'foo',
title: '<h4>Nothing!</h4>',
text: 'Don`t eat it!',
type: 'warning',
duration: -10
})
},
notificate () {
this.$notify({
group: 'app',
text: '<p><b>How about No?</b></p>',
type: 'error',
speed: 3000
})
},
}
}
</script>
The plugin can use the Velocity library to make js-powered animations. To start using it you will have to manually install velocity-animate
& supply the library to vue-notification
plugin.
If you are interested in more or you have any bugs and suggestions, click [here](https://github.com/euvl/vue-notification. That's it!