Best Vue.js Notification Components

Not all notifications are created equal! Styling, animation and position all matter when pushing a notification you want to be read.

I've collected some of my favourite, versatile (and mostly lightweight) Vue.js Notification, Alert & Toast Components in this article!

I'll keep the list updated if I stumble upon a new awesome library! If you think I should include one in particular, just email me (armin@nifty.at).

last updated: 24.09.2018

Vue Sweet Alerts

Sweet Alerts 19225 has been my go-to library for JavaScript alerts forever and it continues to be with their Vue.js wrapper vue-swal 75.

This library is so flexible! The alerts can be configured with buttons/actions, text, icons and various closing triggers. But besides simple alert popups Sweet Alerts also support more complex use-cases like nested alerts or the use of AJAX functions.

The design of the alert popups fits many project styles out-of-the-box - I rarely have to customize heavily. But you can of course use your own styling and content templates.

The default animations of the popup box and the icons included are timed really well but can get a bit annoying if the user will see these notifications a lot (or for you when testing your code...).

From a usability perspective, I usually use Sweet Alerts for actionable and more important notifications, like when I need the user confirm the deletion of an item in a CRUD view.

minified & gzipped: 8.5KB

vue-swal Vue.js wrapper for SweetAlert
icon-eye-dark Created with Sketch. 2.404

Vue Toasted

For toasts (informational notifications), I love the Vue Toasted Library 817! The notifications can be configured with custom actions, duration, text and icons (Material Icons, Fontawesome or Material Design Icons). Besides 3 available styles you can also choose whether the toast should be displayed full-width.

Browser support is awesome, as well as touch- and mobile-compatibility.

Vue Toasted also is officially used by Nuxt.js!

minified & gzipped: 17.8KB

Vue Toasted Responsive Touch Compatible Toast plugin
icon-eye-dark Created with Sketch. 5.970

Vue Noty

Noty 6078 is a dependency-free JavaScript notification library. It's the first alert library I found that supports Web Push Notifications additional to "normal" alerts.

It provides 11 layouts (= positions on the screen or in a container), 5 notification styles (= alert / success / warning / error / info), and 9 themes (= colour palettes and overall styles). It's also highly customizable, so you can create custom templates and use your own animations. It also supports using animate.css, mo.js, bounce.js, velocity and other libraries.

To manage your notifications, Noty offers a named queue system, API methods & Callbacks.

vuejs-noty  81 is a Vue.js wrapper for the library.

minified & gzipped: 10.3KB

Vue Noty A Vue.js wrapper around Noty
icon-eye-dark Created with Sketch. 2.442

Vue Notification

vue-notification is a simple and pretty lightweight notification library. 

You can choose between CSS and velocity-Animations for your notifications and customize duration, speed, positions and size. It offers 3 styles for success / error / warning alerts, but custom templating and styling is also possible.

Despite being a bit more limited than f.ex. Noty, this library covers everything I usually need in notifications without unnecessary overhead.

minified & gzipped: 4.2KB

vue-notification 🍦 Vue.js 2 library for showing notifications
icon-eye-dark Created with Sketch. 4.285

Vue Snotify

Vue Snotify  439 provides many configuration options while still being pretty lightweight. 

You can choose icons, a backdrop, timeouts, positions, 3 different styles, progress bars and more. Templates include not only simple alerts, but also input prompts with validation.

The default styles tend to be a bit too particular for me to use this library out-of-the-box in my projects, but can easily be customized with styles and custom CSS animations.

Snotify also provides a built-in system for asynchronous notifications which might come in handy!

minified & gzipped: 5KB

Vue Snotify Vue.js 2 Notification Center
icon-eye-dark Created with Sketch. 380

Similar Articles
Best Vue.js Datepickers
23.07.2018  •  in #UI Components
Why create a custom DatePicker yourself, if there are so many really great Vue.js components already? We've collected our favourite DatePickers based on whether they are well maintained, easy to use, look nice and provide a good UX. This list will g...
The best Vue.js Admin Dashboards
16.04.2018  •  in #UI Components
As admin dashboards usually rely heavily on JavaScript, it was just a matter of time until beautiful Dashboards & Templates built with Vue.js begin to emerge! In this post, you'll find a growing collection of  💰 premium and free Vue.js Admin Template...
Comments