Vue.js notifications
Demo: http://vue-notification.yev.io/
Install
npm install --save vue-notification
How to
In main.js:
/*or for SSR:import Notifications from 'vue-notification/dist/ssr.js'*/ Vue
In App.vue:
<notifications group="foo" />
In any of your vue files:
this;
Anywhere else:
Vue
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 | Ignore repeated instances of the same notification |
closeOnClick | Boolean | true | Close notification when clicked |
$ = {enter: {opacity: [1, 0]}, leave: {opacity: [0, 1]}}
API
this
Title and Text can be HTML strings.
Also you can use simplified version:
this
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
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
To apply this style you will have to specify "classes" property:
<notifications classes="my-style"/>
Default:
.vue-notification
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
:
Vue
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 = { /* * "element" - is a notification element * (before animation, meaning that you can take it's initial height, width, color, etc) */ let height = elementclientHeight return // Animates from 0px to "height" height: height 0 // Animates from 0 to random opacity (in range between 0.5 and 1) opacity: Math * 05 + 05 0 } leave: height: 0 opacity: 0
<notifications animation-type="velocity" animation="animation"/>
Cleaning
To remove all notifications, use clean: true
parameter.
this
FAQ
Check closed issues with FAQ
label to get answers for most asked questions.
Development
To run an example: # Build main library cd vue-notificationnpm installnpm run build # Build and run demo cd demonpm installnpm run dev # Run tests npm run test # Watch unit tests npm run unit:watch