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