7 Best Material Design Inspired Toast Components For Vue.js (2020 Update)

Toast is a messaging system introduced in Material Design that displays a small and auto-dismiss notification popup for alert, warning, info, error messages on the web app.

In this post, we’re going to share with you the 7 best Vue.js components that make it simple to implement the Toast Message system on your modern web & mobile applications. Have fun.

Let’s get started.

Originally published Sep 19, 2019,  updated Feb 24 2020

1. vue-toasted

vue-toasted

vue-toasted is a responsive, attractive,  touch-friendly, highly customizable toast component for Vue.js.

Key features:

  • Allows actions in the toast messages.
  • Custom icons. Supports Font Awesome, Material Icons, etc.
  • Allows to dismiss the toast messages with swipe off.
  • ‘success’, ‘info’, ‘error’ types.
  • 3 themes: ‘toasted-primary’, ‘outline’, ‘bubble’.

Demo Download


2. vue-snotify

snotify

This is a lightweight yet fully configurable notification component that comes with 9 notification types: async, confirm, prompt, html, etc.

Demo Download


3. Mobile-first Toast Plugin For Vue2

A Mobile Toast Plugin For Vue2

A mobile-friendly toast notification plugin designed for Vue 2+ applications.

Demo Download


4. Vue Toastification

A Mobile Toast Plugin For Vue2

Toastification is a lightweight, configurable, pretty nice toast notification library for Vue.js apps.

Demo Download


5. vue2-toastr

Toastr Component For Vue2

A Vue.js 2+ component to create toastr inspired notifications on the web app. Smooth animations based on the Animate.css.

Demo Download


6. Vue-Easy-Toast

Easy Toaster Component For VueJS

An easy yet configurable and animated toast notification component for Vue.js.

Demo Download


7. vue-izitoast

vue-izitoast

This is a Vue.js wrapper for the izitoast library to implement elegant, responsive, flexible notifications on the web app.

Demo Download


Conclusion:

You can find more toast notification components on our Toast section.

Not a Vue.js user? We also provide another list of the 10 best toast notification solutions implemented in Vanilla JavaScript. I hope you like it.

You Might Be Interested In: