Best Vue.js Notification Components 2023

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 Toastification 2666

  • ✅ Support for Vue 2 + 3

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 and features for its 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. 4.791

Vue Notification  2384

  • ✅ Support for Vue 2 + 3

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.

It covers all important use cases for notifications without unnecessary overhead.

For Vue 3 support, use the fork kyvg/vue3-notification 293!

4.2KB minified & gzipped

Vue Notification Notification Library
icon-eye-dark Created with Sketch. 25.912
Vue3 Notification Vue 3 Notification Library
icon-eye-dark Created with Sketch. 6.473

Vue Toast Notification 533

  • ✅ Support for Vue 2 + 3

vue-toast-notification is one of the most lightweight alternatives for basic notifications with configurations for type (success / error / warning etc), position, duration, message, action and queuing.

The library does not offer fancy progress bars or similar gimmicks, but if you just want to display a message to your users this might be everything you need!

minified & gzipped: 2.3KB

Vue Toast Notification Toast Notification Component
icon-eye-dark Created with Sketch. 23.735

Vue SweetAlert  628

  • ✅ Support for Vue 2 + 3

SweetAlert 16255 is a popular choice for alerts. There are Vue wrappers available like Vue SweetAlert 2 628.

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, but you can of course use your own styling and content templates. The default animations of the popup box and the icons included are nice, but can get a bit annoying if the user will see these notifications a lot.

The library is not really on the lightweight size, so you'll have to evaluate if you need its features!

vue-sweetalert2 – minified & gzipped: 31KB

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

Similar Articles
Best Vue Form Libraries of 2023
11.04.2023  •  in #UI Components
Forms are an important ingredient for almost every web app. But they can get complex pretty fast, and you’ll have to work through the repetitive processes of handling, storing and validating your data for every custom form. At some point, you'll be...
The best Vue.js Admin Dashboards 2023
30.01.2023  •  in #UI Components
In this post, you'll find a growing collection of free & premium Vue.js admin dashboard templates! They're all versatile, easy to use, responsive and high-quality. If you think I'm missing an essential entry on this list, tell me on Twitter @MadeWit...