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 2451

  • ✅ 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.514

Vue Notification  2382

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

4.2KB minified & gzipped

Vue Notification Notification Library
icon-eye-dark Created with Sketch. 25.673
Vue3 Notification Vue 3 Notification Library
icon-eye-dark Created with Sketch. 4.918

Vue Toast Notification 492

  • ✅ 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. 22.160

Vue SweetAlert  614

  • ✅ Support for Vue 2 + 3

SweetAlert 15911 is a popular choice for alerts. There are Vue wrappers available like Vue SweetAlert 2 614.

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

Similar Articles
Top Vue.js Carousel & Slideshow Components 2023
30.01.2023  •  in #UI Components
Needing to build carousels have caused me some of the most painful moments of my freelance career. I have probably seen every version of them that designers can think of. So, before you use a carousel: Have you checked ? 🙃 No, but seriously: If you...
Top Vue.js Chart Components in 2023
30.01.2023  •  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!