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.
Leave a Reply