Best Vue.js Notification Components 2024

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 Notification

• ✅ Support for Vue 2 + 3

vue-notification  2377 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 well-maintained Vue 3 support use the port/fork kyvg/vue3-notification 401!

Vue Toast Notification 648

• ✅ 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!

Notivue 867

• ✨ Support for Vue 3

Notivue is a modular toast notification system for Vue and Nuxt. You can use their drop-in components or use your own together with their headless API.

Notivue is fully accessible (including a reduced motion-mode), offers RTL support and provides everything you need to create, update and dismiss notifications in your apps.

The modularity makes this library really versatile and flexible!

Vue3 Toastify 545

• ✨ Support for Vue 3

Vue3 Toastify is a newer, easy to setup notification library. Its feature set is pretty complete, offering everything you need to add all kinds of toasts to your apps.

All toasts are customizable individually, and you could even display another component within a toast!