Vue.js notifications
Demo: http://vue-notification.yev.io/
Install
npm install --save vue-notificationHow to
In main.js:
import Vue from 'vue' import Notifications from 'vue-notification' /* or for SSR: import Notifications from 'vue-notification/dist/ssr.js' */ Vue.use(Notifications)In App.vue:
<notifications group="foo" />In any of your vue files:
this.$notify({ group: 'foo', title: 'Important message', text: 'Hello user! This is a notification!' });Anywhere else:
import Vue from 'vue' Vue.notify({ group: 'foo', title: 'Important message', text: 'Hello user! This is a notification!' })Custom instance configuration
All configurations are optional.
| Name | Type | Default | Description |
|---|---|---|---|
| name | String | notify | Defines the instance name. It's prefixed with the dollar sign. E.g. $notify |
| componentName | String | notifications | The component's name |
Props
All props are optional.
| Name | Type | Default | Description |
|---|---|---|---|
| group | String | null | Name of the notification holder, if specified |
| type | String | null | Class that will be assigned to the notification |
| width | Number/String | 300 | Width of notification holder, can be %, px string or number.Valid values: '100%', '200px', 200 |
| classes | String/Array | 'vue-notification' | List of classes that will be applied to notification element |
| position | String/Array | 'top right' | Part of the screen where notifications will pop out |
| animation-type | String | 'css' | Type of animation, currently supported types are css and velocity |
| animation-name | String | null | Animation name required for css animation |
| animation | Object | $* | Animation configuration for Velocity animation |
| duration | Number | 3000 | Time (ms) animation stays visible (if negative - notification will stay forever or until clicked) |
| speed | Number | 300 | Speed of animation showing/hiding |
| max | Number | Infinity | Maximum number of notifications that can be shown in notification holder |
| reverse | Boolean | false | Show notifications in reverse order |
| ignoreDuplicates | Boolean | false | Show notifications in reverse order |
| closeOnClick | Boolean | true | Close notification when clicked |
$ = {enter: {opacity: [1, 0]}, leave: {opacity: [0, 1]}}
API
this.$notify({ // (optional) // Name of the notification holder group: 'foo', // (optional) // Class that will be assigned to the notification type: 'warn', // (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 // (optional) // Data object that can be used in your template data: {} })Title and Text can be HTML strings.
Also you can use simplified version:
this.$notify('text')Groups
If you are planning to use notification component for 2 or more completely different types of notifications (for example, authentication error messages in top center and generic app notifications in bottom-right corner) - you can specify group property which is essentially a name of notification holder.
Example:
<notifications group="auth"/> <notifications group="app"/>this.$notify({ group: 'auth', text: 'Wrong password, please try again later' })Position
Position property requires a string with 2 keywords for vertical and horizontal postion.
Format: "<vertical> <horizontal>".
- Horizontal options:
left,center,right - Vertical options:
top,bottom
Default is "top right".
Example:
<notifications position="top left"/>Style
You can write your own css styles for notifications:
Structure:
// SCSS: .my-style { // Style of the notification itself .notification-title { // Style for title line } .notification-content { // Style for content } &.my-type { /* Style for specific type of notification, will be applied when you call notification with "type" parameter: this.$notify({ type: 'my-type', message: 'Foo' }) */ } }To apply this style you will have to specify "classes" property:
<notifications classes="my-style"/>Default:
.vue-notification { padding: 10px; margin: 0 5px 5px; font-size: 12px; color: #ffffff; background: #44A4FC; border-left: 5px solid #187FE7; &.warn { background: #ffb648; border-left-color: #f48a06; } &.error { background: #E54D42; border-left-color: #B82E24; } &.success { background: #68CD86; border-left-color: #42A85F; } }Custom template (slot)
Optional scope slot named "body" is supported.
Scope props:
| Name | Type | Description |
|---|---|---|
| item | Object | notification object |
| close | Function | when called closes the notification |
Example:
<notifications group="custom-template" position="bottom right"> <template slot="body" slot-scope="props"> <div> <a class="title"> {{props.item.title}} </a> <a class="close" @click="props.close"> <i class="fa fa-fw fa-close"></i> </a> <div v-html="props.item.text"> </div> </div> </template> </notifications>Width
Width can be set using a string with a percent or pixel extension (if simple number is not enough).
Examples: '100%', '50px', '50', 50
Velocity Animation
Plugin can use use Velocity library to make js-powered animations. To start using it you will have to manually install velocity-animate & supply the librarty to vue-notification plugin (reason for doing that is to reduce the size of this plugin).
In your main.js:
import Vue from 'vue' import Notifications from 'vue-notification' import velocity from 'velocity-animate' Vue.use(Notifications, { velocity })In the template you will have to set animation-type="velocity".
<notifications animation-type="velocity"/>The animation configuration consists of 2 objects/functions: enter and leave.
Example:
/* * Both 'enter' and 'leave' can be either an object or a function */ animation = { enter (element) { /* * "element" - is a notification element * (before animation, meaning that you can take it's initial height, width, color, etc) */ let height = element.clientHeight return { // Animates from 0px to "height" height: [height, 0], // Animates from 0 to random opacity (in range between 0.5 and 1) opacity: [Math.random() * 0.5 + 0.5, 0] } }, leave: { height: 0, opacity: 0 } }<notifications animation-type="velocity" animation="animation"/>Cleaning
To remove all notifications, use clean: true parameter.
this.$notify({ group: 'foo', clean: true })FAQ
Check closed issues with FAQ label to get answers for most asked questions.
Development
To run an example: # Build main library cd vue-notification npm install npm run build # Build and run demo cd demo npm install npm run dev # Run tests npm run test # Watch unit tests npm run unit:watch
