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