Notify
A simple bootstrap|bulma styled Vue component for notifications. Compatible with Vue 2.x
Requirements
Required packages:
- vue 2+
- velocity-animate 1.5+
Optional packages:
- bootstrap or bulma (only used for styling)
Install
$ yarn add vue2-notify
Then in your main.js:
// Use NotifyVue
Usage
Inside your component:
this
or
Vue
You may use short type call:
this$notify;
or
Vue;
Bulma users can call this.$notify.danger('Error message');
, this.$notify.danger()
is link to this.$notify.error()
Configuration
Option | Type | Default | Description |
---|---|---|---|
itemClass | String | 'alert col-12' | The class that the notification is wrapped in, defaults to the default bootstrap style |
duration | Integer | 500 | The amount of milliseconds that the animation should take (slideDown/slideUp, fadeIn/fadeOut) |
visibility | Integer | 2000 | The amount of milliseconds that the notification should be visible (if notification is not permanent) |
position | String | 'top-left' | The location of the notification, currently possible: top-left , top-right , top-full , bottom-left , bottom-right and bottom-full |
enter | String | 'slideDown' | Entry animation type, currently possible: slideDown , fadeIn |
leave | String | 'slideUp' | Exit animation type, currently possible: slideUp , fadeOut |
permanent | Boolean | false | Disable notification auto close |
mode | String | 'text' | Set 'html' to output real html. Only use HTML interpolation on trusted content and never on user-provided content. |
closeButtonClass | Boolean / String | false | Class name for close button. If false - close button will not be displayed. ( Example: set 'delete' for bulma or 'close' for bootstrap.) |
Configuration options can be provided as options in the Vue.use statement:
// Use NotifyVue
Overriding configuration
You can override the itemClass, iconClass, visibility, mode or closeButtonClass options on a per usage basis:
this
Type should be one of the types defined in the configuration of the component.
Types
Defines the type of notifications that can be triggered
Type | ItemClass | IconClass |
---|---|---|
info | 'alert-info' | 'fa fa-lg fa-info-circle' |
error | 'alert-danger' | 'fa fa-lg fa-exclamation-triangle' |
warning | 'alert-warning' | 'fa fa-lg fa-exclamation-circle' |
success | 'alert-success' | 'fa fa-lg fa-check-circle' |
You can override the default list of types in the following way, for example to use glyphicons instead of font awesome icons:
const types = info: itemClass: 'alert-info' iconClass: 'glyphicons glyphicons-info-sign' success: itemClass: 'alert-success' iconClass: 'glyphicons glyphicons-ok' Vue$notify
Examples
Using vue2-notify with Bulma
In app.js:
Vueconst types = info: itemClass: 'is-info' error: itemClass: 'is-danger' warning: itemClass: 'is-warning' success: itemClass: 'is-success' iconClass: 'fa fa-lg fa-check-circle' Vue$notify;
And call this.$notify
method as usual:
this
or
this$notify
HTML in notification
this
or
this$notify
Permanent notification
this