Best Vue.js Notification Components 2021

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 tell me via Twitter (@MadeWithVueJS).

Vue Toasted  2061

For toasts (informational notifications), I love the Vue Toasted library! 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 Touch-compatible Toast Plugin
icon-eye-dark Created with Sketch. 31.102

Vue Toastification 1154

Vue Toastification offers simple and lightweight toast notifications with built-in Nuxt support. It's written in TypeScript and supports Vue 2 or Vue 3 & the Composition API.

Feature-wise it offers a lot of flexibility for it's weight: swipe to close, progress bars and various customizations.

This library is super easy to set up. Nice one – go use it!

minified & gzipped: 5KB

Vue Toastification Notification Component
icon-eye-dark Created with Sketch. 2.838

Vue SweetAlert

SweetAlert 13655 has been my go-to library for JavaScript alerts forever. There are Vue wrappers available like Vue SweetAlert 2 504.

This library is very 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 well but can get a bit annoying if the user will see these notifications a lot.

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

vue-sweetalert2 – minified & gzipped: 31KB

Vue SweetAlert2 Wrapper for Sweetalert2
icon-eye-dark Created with Sketch. 4.643

Vue Notification  2189

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, this library covers everything I usually need in notifications without unnecessary overhead.

minified & gzipped: 4.2KB

Vue Notification Notification Library
icon-eye-dark Created with Sketch. 24.245

vue-notifications  670

This last one is actually not a notification library, but it may be useful for some of you nonetheless! vue-notifications is a bridge between your app and notification libraries.

You can use it to make sure your code is library-agnostic, meaning you can replace the UI library you're using without having to rewrite your code.

vue-notifications Library-agnostic Notifications
icon-eye-dark Created with Sketch. 1.586

Similar Articles
Top Vue.js Chart Components
18.11.2020  •  in #UI Components
Choosing a chart component is not always an easy task. They have to fit your data, be beautiful, customizable, responsive, easy to implement.. 🤯 We have collected our favourite Vue.js chart components in this article!
Best Vue.js Datatables 2021
27.04.2021  •  in #UI Components
Datatables are a complex beast. If you ever built data-heavy business applications, you will probably know it's not easy to make them readable and clear. Discover some of the best datatable components for Vue.js that are flexible enough to adapt to your data and use case.