Blog Detail


Vue-notifikation - An Easy to Use Vue Js Notification Plugin cover image

arrow_back Vue-notifikation - An Easy to Use Vue Js Notification Plugin

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


The library can be installed via downloading a git repo:

git clone

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


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!


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


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



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



This method creates notifications for any good news.



Use the info method whenever you need some regular notification.



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.



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.


Let’s create notifications for some successful events.

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

You can visit Github for source code and more information.

Published at : 18-11-2021

Author : Rizwan Aslam
Rizwan Aslam

I am a highly results-driven professional with 12+ years of collective experience in the grounds of web application development especially in laravel, native android application development in java, and desktop application development in the dot net framework. Now managing a team of expert developers at Codebrisk.

Launch your project

Launch project