Vue.js is an easy to use web app framework that we can use to develop interactive front end apps.

In this article, we’ll look at some Vue notification libraries that’ll save you time. They’re used for display popup notifications your way.

vue-notifications

vue-notifications is a library to let us display pop-up notifications without creating them ourselves.

To install it, we run:

npm i vue-notifications mini-toastr --save

Then we write the following code to import the library and use it:

main.js:

import Vue from "vue";
import App from "./App.vue";
import VueNotifications from "vue-notifications";
import miniToastr from "mini-toastr";
const toastTypes = {
  success: "success",
  error: "error",
  info: "info",
  warn: "warn"
};
miniToastr.init({ types: toastTypes });
const toast = ({ title, message, type, timeout, cb }) => {
  return miniToastr[type](message, title, timeout, cb);
};
const options = {
  success: toast,
  error: toast,
  info: toast,
  warn: toast
};
Vue.use(VueNotifications, options);
Vue.config.productionTip = false;
new Vue({
  render: h => h(App)
}).$mount("#app");

In the code above, we add the mini-toastr to configure and show toast popups. We added various types of toasts and then imported the VueNotifications dependency on the options as the type. The toast function calls miuniToastr to create the popup according to the types given.

The parameters in the toast callback has the following meanings:

• title - string for the notification title
• message - string for the message
• timeout - number of milliseconds before the notification is gone
• cb - callback function

App.vue :

<template>
  <div id="app">
    <button @click="show">Show Greeting</button>
  </div>
</template>
<script>
export default {
  name: "App",
  notifications: {
    showGreeting: {
      title: "Hello",
      message: "Hello world",
      type: "info"
    }
  },
  methods: {
    show() {
      this.showGreeting();
    }
  }
};
</script>

In the App component, we just add the notifications property with a property, which is the name of the function to display the message. Then inside, we set the title, message, and type according to the ones listed in main.js .

Then when we click the button, we see a toast shown with Hello as the title and Hello world as the message in blue background.

vue-easy-toast

vue-easy-toast is very easy to use as its name suggests. To install it, we run:

npm install vue-easy-toast --save

Then to use it, we write the following code:

main.js :

import Vue from "vue";
import App from "./App.vue";
import Toast from "vue-easy-toast";
Vue.use(Toast);
Vue.config.productionTip = false;
new Vue({
  render: h => h(App)
}).$mount("#app");

App.vue :

<template>
  <div id="app">
    <button @click="showToast">Show Toast</button>
  </div>
</template>
<script>
export default {
  name: "App",
  methods: {
    showToast() {
      this.$toast("Toast.");
    }
  }
};
</script>

All we did was import the package with Vue.use and then call the $toast method added by vue-easy-toast to display a toast.

Then when we click the Show Toast button, we see the Toast. message displayed. We can also have HTML in our message string. Other options include:

• id - string for a unique identifier
• parent - string for the container to display the toast in
• className - class name for the toast, can be a string or an array of strings
• horizontalPosition - the horizontal position of the toast as a string
• verticalPosition - vertical position of the toast as a string
• duration - number of ms to display the toast
• mode - a string that can take the value override or queue . If override , the last toast will forcibly flush previous.
• closesable - boolean value for enabling closing toast manually
• transition - string for built-in transformation name, which can be fade or slide-[up/down/left/right]

vue-notification

vue-notification is another easy to use notification library for showing notifications. To install it, we run:

npm install --save 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.use(Notifications);
Vue.config.productionTip = false;
new Vue({
  render: h => h(App)
}).$mount("#app");

App.vue :

<template>
  <div id="app">
    <notifications group="foo"/>
    <button @click="showToast">Show Toast</button>
  </div>
</template>
<script>
export default {
  name: "App",
  methods: {
    showToast() {
      this.$notify({
        group: "foo",
        title: "Important message",
        text: "Hello user!"
      });
    }
  }
};
</script>

We just have to import the library with Vue.use, and then we can call the $notify method that comes with vue-notification to display a message once we added the notification component to our template with the given group.

Then when we click the Show Toast button, we’ll see a blue popup with our message.

Conclusion

These libraries are all very useful for display notifications. Some libraries, like vue-easy-notification and vue-notification are easier than the other ones.