Use Toast Notifications In Vue.js With vue-snotify In 5 Minutes

By Mohit Tanwani Last updated Jan 30, 2018

Toast notification is always been crucial while using it on an app. This article will help you implement the toast notifications in Vue.js with vue-snotify.

The vue-snotify is a dependency that you need to install in your Vue.js app to start using the toast notifications.

Let’s use toast notifications in Vue.js with vue-snotify

There’re few things (Modal dialogs, Toasts/notifications/alerts) that a developer always should be careful while using it in his app.

By using vue-snotify, you don’t need to worry about anything like style and flexibility.

1. Install of vue-snotify in your Vue.js app

# NPM

npm install vue-snotify --save

# YARN

yarn add vue-snotify

2. Import plugin in your app

This will be your main.js file.

import Vue from 'vue';
import App from './App.vue';
import Snotify from 'vue-snotify';
// You also need to import the styles. If you're using webpack's css-loader, you can do so here:
import 'vue-snotify/styles/material.css'; // or dark.css or simple.css

Vue.use(Snotify);

new Vue({
  el: '#app',
  render: h => h(App)
});

Now, just add the component vue-snotify where you want to render the notification.

<template>
  <div id="app">
    <vue-snotify></vue-snotify>
  </div>
</template>

3. Example of vue-snotify

You can start using the notification in your app with vm.$snotify object.

3.1 Success notification

vm.$snotify.success('Example body content');
vm.$snotify.success('Example body content', 'Example Title');

3.2 Error notification

vm.$snotify.error('Example body content');
vm.$snotify.error('Example body content', 'Example Title');

Like success and error, here, you can use multiple options like Simple, Info, Warning.

4. Asynchronous Notifications

vue-snotify allows you to call the notifications asynchronously. Here, can example of success notification call.

this.$snotify.async('Called with promise', 'Success async', () => new Promise((resolve, reject) => {
    setTimeout(() => resolve({
       title: 'Success!!!',
       body: 'We got an example success!',
       config: {
         closeOnClick: true
       }
    }), 2000);
}));

Here, is an inbuilt async function signature and example available, you can call the function as per your convenience.

5. Confirm Notification

Sometimes, as a developer we need user’s input on a notification in terms of yes/no. To peform, confirm notification we can use the .confirm method.

vm.$snotify.confirm('Example body content', 'Example title', {
  timeout: 5000,
  showProgressBar: true,
  closeOnClick: false,
  pauseOnHover: true,
  buttons: [
    //Yes
    {text: 'Yes', action: () => console.log('Clicked: Yes'), bold: false},
    //No
    {text: 'No', action: () => console.log('Clicked: No')},
    //Later
    {text: 'Later', action: (toast) => {console.log('Clicked: Later'); vm.$snotify.remove(toast.id); } },
    //Close
    {text: 'Close', action: (toast) => {console.log('Clicked: No'); vm.$snotify.remove(toast.id); }, bold: true},
  ]
});

Also, you can have the options to perform Prompt and HTML based toast notifications in Vue.js with vue-snotify.

Moreover, here is a vue-snotify playground where you can try different options and play around with the same.

Toast notifications in Vue.js vue-snotify