Table of Contents
URL: https://www.progressiverobot.com/vuejs-vue-notifications-snotify/
There are a few things I always dread implementing in every app I write. Modal dialogs (hard to get right on mobile,) and toasts / notifications / alerts / whatever. Not the native mobile / desktop push notifications, those are comparatively easy. The difficulty with toasts is building a flexible enough system to handle multiple notifications, actions in progress, various styles, various types of content, all while maintaining great animations for showing and hiding. It's even worse if you want them to be interactive. vue-snotify takes care of most of these use-cases with a simple API and great-looking notifications.
Installation
Install <^>vue-snotify<^> in your Vue.js project.
# Yarn
$ yarn add vue-snotify
# NPM
$ npm install vue-snotify --save
Usage
Now enable the plugin in the main Vue setup file.
[label main.js]
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, add the vue-snotify component somewhere in your main app element. This is where the notifications will render.
[label App.vue]
<template>
<div id="app">
<!-- Your app stuff here -->
<vue-snotify></vue-snotify>
</div>
</template>
From there, you can start using Snotify with the injected vm.$snotify object. Here are some examples, though there's plenty you can do with it.
All notifications can be configured with these properties.
Simple
Pretty much a boring old traditional classic normal (I'm running out of words here) notification.
...
export default {
methods: {
displayNotification() {
this.$snotify.simple({
body: 'My Notification Body'
title: 'Notification Title',
config: {}
});
}
}
}
Success / Info / Warning / Error
All of these display a simple notification in their respective color.
Success
...
export default {
methods: {
displayNotification() {
this.$snotify.success({
body: 'Success Body'
title: 'Success Title',
config: {}
});
}
}
}
Error
...
export default {
methods: {
displayNotification() {
this.$snotify.error({
body: 'Error Body'
title: 'Error Title',
config: {}
});
}
}
}
Warning
...
export default {
methods: {
displayNotification() {
this.$snotify.warning({
body: 'Warning Body'
title: 'Warning Title',
config: {}
});
}
}
}
Info
...
export default {
methods: {
displayNotification() {
this.$snotify.info({
body: 'Info Body'
title: 'Info Title',
config: {}
});
}
}
}
Asynchronous Notifications
Snotify has a built-in system for asynchronous notifications, though they can be a bit tricky to understand. Here's an example.
...
displayNotification() {
this.$snotify.async({
body: 'Working on a thing...'
title: 'Working',
config: {},
action: () => new Promise((resolve, reject) => {
// Do async stuff here.
setTimeout(() => {
resolve(); // Success
/* reject(); // Error
// Custom replacement.
resolve({
body: 'Custom Success',
config: {}
})
*/
}, 2000);
})
});
}
So basically async notifications should have an action property that is a function that returns a promise. If that promise resolves, then the async notification is replaced with a success one. If it rejects, it's replaced with an error. You can also resolve with another notification config object to display a custom success notification.
Other
There's also a great little playground available to test the various options available artemsky.github.io. Enjoy!
