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

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

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})