// Tutorial //

Notifications in Vue.js with vue-snotify

Published on October 30, 2017
Default avatar
By Joshua Bemenderfer
Developer and author at DigitalOcean.
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.

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.

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 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!


Want to learn more? Join the DigitalOcean Community!

Join our DigitalOcean community of over a million developers for free! Get help and share knowledge in our Questions & Answers section, find tutorials and tools that will help you grow as a developer and scale your project or business, and subscribe to topics of interest.

Sign up
About the authors
Default avatar
Developer and author at DigitalOcean.

Still looking for an answer?

Was this helpful?
Leave a comment