Tutorial

Notifications in Vue.js with vue-snotify

Published on October 30, 2017
Default avatar

By Joshua Bemenderfer

Notifications in Vue.js with vue-snotify

While we believe that this content benefits our community, we have not yet thoroughly reviewed it. If you have any suggestions for improvements, please let us know by clicking the “report an issue“ button at the bottom of the tutorial.

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!

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about us


About the authors
Default avatar
Joshua Bemenderfer

author

Still looking for an answer?

Ask a questionSearch for more help

Was this helpful?
 
Leave a comment


This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

Try DigitalOcean for free

Click below to sign up and get $200 of credit to try our products over 60 days!

Sign up

Join the Tech Talk
Success! Thank you! Please check your email for further details.

Please complete your information!

Get our biweekly newsletter

Sign up for Infrastructure as a Newsletter.

Hollie's Hub for Good

Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

Become a contributor

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

Welcome to the developer cloud

DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

Learn more
DigitalOcean Cloud Control Panel