Show Notifications in Vue Apps with vue-notification

The vue-notification is useful for showing popup notifications within our Vue apps.

To use it, we can install it by running:

npm i vue-notification

Then we can use it as follows:

main.js

import Vue from "vue";
import App from "./App.vue";
import Notifications from "vue-notification";

Vue.config.productionTip = false;
Vue.use(Notifications);

new Vue({
  render: h => h(App)
}).$mount("#app");

App.vue

<template>
  <div id="app">
    <notifications group="foo"/>
    <button @click="notify">show alert</button>
  </div>
</template>

<script>
export default {
  name: "App",
  methods: {
    notify() {
      this.$notify({
        group: "foo",
        title: "Hello",
        text: "Hello world!"
      });
    }
  }
};
</script>

All we have to do is to register the plugin in main.js and then we can use the this.$notify method in our components.

Then object we pass in has the title and text properties, which will be displayed as the title and text of the alert.

So when we click on ‘show alert’, that’s what we’ll see.

We also have to set the group prop to the name of the group. It can be anything as long it’s a string and it’s used in the $notify method.

Other props for the notifications component include:

• classes – class name for styling
• type – string for the class that’ll be assigned to the notification
• width – width of the notification
• position– string for the position that we want to put the notification
• animation-type – indicate whether we want to use 'css' or 'velocity' to animate the pop up
• animation-name – name of the animation required for 'css' animation
• duration – duration of how long a popup will be shown
• speed – speed of show or hiding the animation
• max – max number of notifications to show at once
• reverese – show notification in reverse order
• ignoreDuplicates – ignore repeated instance of the same popup
• closeOnClick – boolean indicating whether we close notification when clicked

With the vue-notification library, we can show notifications in our Vue app with ease.