Vue-notifikation is a Vue js notification plugin that can be easily utilized in your application.

Installation

The library can be installed via downloading a git repo:

git clone https://github.com/happyCoda/vue-notifikation.git

You can also install this via npm, Just run this command:

$ npm install vue-notifikation

Getting started

To start using vue-notifikation, you need to do two things. First, write some HTML:

<div id="notifikation"></div>

You can use any id or even class. This is not necessary, but if you won’t do this, the plugin will have to go to the DOM and create this HTML for you. The second thing to do is plugin installation:

// Somewhere in your main js file
import VueNotifikation from 'vue-notifikation';
// Then install the plugin to Vue
Vue.use(VueNotifikation);

Usage

Using vue-notifikation is pretty straightforward. Just call one of the API methods provided.

// After you've install the plugin, you can use it in any component
export default {
  name: 'SupaDupaComponent',
  data() {
    //...
  },
  methods: {
    someVeryUsefullMethod() {
      // That's it!
      this.$notifikation.show(options);
    }
  }
}

API

There are 4 methods for calling notifications and one for dismissing them.

show

Generic method. Can create notifications of any level (error, success, or info);

this.$notifikation.show(options);

error

As its name says, the error method creates error-level notifications.

this.$notifikation.error(options);

success

This method creates notifications for any good news.

this.$notifikation.success(options);

info

Use the info method whenever you need some regular notification.

this.$notifikation.info(options);

dismiss

To close notifikation bubble call dismiss method. The method accepts a single parameter – notifikationId. This parameter is optional, and if omitted, all notifications will be dismissed.

this.$notifikation.dismiss(notifikationId);

Options

All 4 API methods expect options object with some configuration data to set up notification.

Name	Type	Default	Description
level	String	info	Sets notification level (e.g.: error). This parameter can be useful with $show method only.
selector	String	‘#notifikation’	Sets selector for DOM container, where your notifications will be rendered.
message	String	‘Notified!’	Notification message to show.
duration	Number	3000	Time in milliseconds before notification will be dismissed.
width	Number	200	Notification width.
height	Number	50	Notification height.
backgroundColor	String	undefined	Notification background color.
color	String	undefined	Notification text color.
right	Number	10	Notification offset from the right window boundary.

Examples

Let’s create notifications for some successful events.

export default {
  name: 'AnotherOneGreatestComponent',
  data() {
    //...
  },
  methods: {
    veryImportantMethod() {
      // That's it!
      this.$notifikation.success({
        message: `You've just von 1 000 000$!!!`
      });
    }
  }
}

You can visit Github for source code and more information.