Notifications in Vue.js with vue-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.

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.

<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 are several other notification types that allow for user interaction as well, such as confirm, prompt, and html notifications. I won’t cover those here, as the official docs do a pretty good job. Take a look!

There’s also a great little playground available to test the various options available here. Enjoy!