Notification component for vue/nuxt projects

Vue Bootstrap Notifications

Installation

$ yarn add @unisharp/vue-component-notification

Nuxt Setup

plugins/notification.js

import Vue from 'vue'
import Notifications from '@unisharp/vue-component-notification'

Vue.use(Notifications)

export default ({ store }, inject) => {
  // Inject `notify` key
  // -> `app.$notify`
  // -> `this.$notify` in Vue components
  // -> `this.$notify` in store actions/mutations
  // This way we can use it in middleware and pages `asyncData` & `fetch`
  inject('notify', new Notifications(Vue))
}

nuxt.config.js

...
plugins: ['~/plugins/notification'],
...

layouts/default.vue

<template lang="pug">
  div
    notifications
    nuxt
</template>

Usage

The show method accetps an object.

this.$notify.show({message: 'Hello world', type: 'default'})

There are 6 helper functions who will accet just a string.

this.$notify.primary('Hello world')
this.$notify.default('Hello world')
this.$notify.success('Hello world')
this.$notify.info('Hello world')
this.$notify.warning('Hello world')
this.$notify.danger('Hello world')