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

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.

Suggested visit: Use Bootstrap 4 With Vue.js In Less Than 5 Minutes

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