vuejs-notification

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:

import Notify from 'vue2-notify'

// Use Notify
Vue.use(Notify)

Usage

Inside your component:

this.$notify('A message that should be displayed', 'type')

or

Vue.$notify('A message that should be displayed', 'type')

You may use short type call:

this.$notify.success('This is success message');

or

Vue.$notify('This is success message');

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 Notify
Vue.use(Notify, {visibility: 5000, permanent: true})

Overriding configuration

You can override the itemClass, iconClass, visibility, mode or closeButtonClass options on a per usage basis:

this.$notify('A message that should be displayed', 'type', { itemClass: 'alert col-6 alert-info', iconClass: 'fa fa-lg fa-handshake-o', visibility: 10000 })

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.setTypes(types)

Examples

Using vue2-notify with Bulma

In app.js:

import Notify from 'vue2-notify'
Vue.use(Notify, {
  itemClass: 'notification'
})
const 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.setTypes(types);

And call this.$notify method as usual:

this.$notify('A message that should be displayed', 'info')

or

this.$notify.info('A message that should be displayed')

HTML in notification

this.$notify('<p>My HTML <br/>message</p>', 'info', {mode: 'html'})

or

this.$notify.error('<p>My HTML <br/>message</p>', {mode: 'html'})

Permanent notification

this.$notify('Permanent message', 'info', {permanent: true})