Selecting the best Vue 3 toast notification library

Users need to stay informed about the status of an application and receive feedback, especially when any asynchronous events occur in the application background. Toast notifications are an effective way to communicate about interface state changes and current progress.

Toast messages contain information that is made visible on screen. They can be dismissible, self-dismissible, or swipeable in nature. Sometimes these distract users from completing their tasks, so they need to be implemented correctly.

In this article, we will walk through some of the best, most used notification libraries for Vue.js. If you want to fork any examples, you can find the GitHub repository here.

We will mainly experiment with three of the most popular Vue notification libraries, and discuss the following:

• vue-toastification
• vue-toast-notification
• vue-sweetalert2
• When to use toast messages
• When not to use toast messages
• Comparison table

vue-toastification

One of the most popular and easy libraries to get started with is vue-toastification. They have the highest number of stars on GitHub, with 2.4k stars. The library can be customized to your application needs, offering different types of content — including text, timeout options, pause when focus out, icon option, sort newest on top — and lot of flexibility.

Features of vue-toastification

• Compatible with Vue 3
• Written in TypeScript, with type support
• Inbuilt swipe-to-close interaction
• Ability to remove the toast programmatically
• A window focus() method pause feature
• Right-to-left and left-to-right text support

You can find a full list of features on GitHub.

Installation

We will install the library with the command below:

npm install --save vue-toastification@next

We can now use the library. Inside our main.js file, we can make the changes below:

import Toast from 'vue-toastification'
import 'vue-toastification/dist/index.css'

//use it 
app.use(Toast)

With the above changes, we can import the Hook provided by the library to help us trigger the toast:

<script>
import { useToast } from "vue-toastification";

export default {
 setup() {
   const toast = useToast();
   return { toast }
 },

 methods: {
   triggerToast() {
     this.toast("Hi from LogRocket", {
       position: "top-right",
       timeout: 5000,
       closeOnClick: true,
       pauseOnFocusLoss: true,
       pauseOnHover: true,
       draggable: true,
       draggablePercent: 0.6,
       showCloseButtonOnHover: false,
       hideProgressBar: true,
       closeButton: "button",
       icon: "fas fa-rocket",
       rtl: false
     });
   }
 }
}
</script>

<template>
 <div>
   <button @click="triggerToast" class="green-button">
     See a notification
   </button>
 </div>
</template>

Creating a custom component

Let’s create a custom component where we can pass the props and other event listeners inside of it. We can pass anything inside the toast (even props, if they’re not reactive) and even close the notification within the toast message itself.

We can do this by limiting our message to just pass strings, so that we can pass anything inside the toast with a custom component; this can be done by simply creating a Vue component.

Create a component and name it Toast.vue:

<script>
export default {
 methods: {
   clicked() {
     // Emit a "click" event when clicked.
     // Can be any event though and even pass parameters back
     this.$emit("click");
   }
 }
};
</script>

<template>
 <div>
   <span>Anything can be added here.</span>
   <button class="action" @click.stop="clicked">Open!</button>
 </div>
</template>

We can import this component to our page and declare it as a custom component, then provide it to the content object as a component key:

seeCustomToast() {
 const content = {
   component: Toast,
   props: {},
   // Listen and react to events using callbacks. In this case we listen for
   // the "click" event emitted when clicking the toast button
   listeners: {
     click: () => {
       this.$toast.success(`Toast notification succeeded`, { position:
             "top-left" })
     }
   }
 }
 this.toast(content);
}

After this change, we can listen for the user’s click in the template using a Vue directive. Then, we’re ready to take a look at the custom toast notification we have created:

<button @click="seeCustomToast" class="green-button">
 See a custom toast notification
</button>

With only this much effort, we have added a simple toast notification and a custom component notification to our application.

vue-toast-notification

vue-toast-notification is quite similar to vue-toastification. It’s easy to get started and implement a toast message, but the library offers less by way of customization and flexibility.

Features

• Support for Vue 3
• Available as a plugin or via the Composition API
  • The available API methods let you add a few tweaks to your toast message
• Not fully customizable
• Dismissable on click
• No swipe gestures

Installation

Install the library with the command below:

npm install vue-toast-notification@^3.0

Let’s also import the default notification style alongside the library imports:

<script>
import 'vue-toast-notification/dist/theme-bootstrap.css'
import { useToast } from 'vue-toast-notification';

export default {
 setup(){
   const toast = useToast();
   return {toast}
 },
 methods: {
   triggerToast(){
     this.toast.success('You did it!');
   }
 }
}
</script>

<template>
 <div>
   <button class="green-button" @click="triggerToast">
     See a notification
   </button>
 </div>
</template>

With just this much code, we can click to see the toast in the interface:

vue-sweetalert2

The vue-sweetalert2 library is the Vue version of the popular library sweetalert. This is one of the oldest libraries with vanilla JavaScript support out there, and moreover, this not only adds popovers also popover modals with very little flexibility. It has good community support, with integrations available for three different frameworks. Unfortunately, they are not fully customizable.

Features

• Supports Vue 3 and TypeScript
• Less flexibility for custom styling
• Support for SSR

Installation

Let’s start using the library with the command below:

npm install -S vue-sweetalert2 

Now, import the library:

import VueSweetalert2 from 'vue-sweetalert2';
import 'sweetalert2/dist/sweetalert2.min.css';

app.use(VueSweetalert2)

Now, we can use it in our desired pages. We can call this.$swal and pass few properties as per our need, too:

<script>
 export default{
   methods: {
     triggerToast(){
       this.$swal({
         toast: true,
         position: 'top-end',
         showConfirmButton: false,
         timer: 3000,
         icon: 'success',
         title: 'Hi from Sweetalert',
         text: 'Have a good day ahead!',
         showCancelButton: 'true'
       });
     }
   }
 }
</script>

<template>
 <div>
   <button class="green-button" @click="triggerToast">
     See a notification
   </button>
 </div>
</template>

With this much code, we can trigger a sweetalert toast within our application.

This might look easy, but it lacks some customizing features in the long run.

When to use toast messages

Toast messages are really useful for communicating with users, but there are some best practices around using them most effectively. We need to be concise and avoid jargon for this type of notification — short, sweet, crisp messages are always ideal.

Toast messages should be easily dismissable or enable the window focus() to make sure users can quickly continue on their path in your app. You should also only use one toast at a time, as they can clutter your app or webpage and distract users. If you’re using toast messages in a mobile use case, consider adding mobile-friendly gestures for dismissal, like tap and swipe.

Here are some use cases when toast messages serve our needs best, such as:

• On short notice, usually about our application’s system status
• When offering redirects and alternatives to system failure
• To confirm a specific action took place like a confirmation, deletion, or editing message

When not to use toast messages

There are also times when we won’t want to make use of toast notifications. The misuse (and overuse) of toast messages can lead to a bad user experience:

• Displaying confidential information
• When interrupting the flow
• Causing distraction
• Preventing automatic fading toast
• Non-dismissable

Comparison table

Conclusion

Toast notifications are a great way to capture user attention and inform them about important application factors. We know toasts should be short-lived and only offer small feedback. Toasts can appear anywhere on the screen, as according to the application’s nature.

You can find the code repository for this post on my GitHub. Thank you.

Experience your Vue apps exactly how a user does

Debugging Vue.js applications can be difficult, especially when there are dozens, if not hundreds of mutations during a user session. If you’re interested in monitoring and tracking Vue mutations for all of your users in production, try LogRocket. https://logrocket.com/signup/

LogRocket is like a DVR for web and mobile apps, recording literally everything that happens in your Vue apps including network requests, JavaScript errors, performance problems, and much more. Instead of guessing why problems happen, you can aggregate and report on what state your application was in when an issue occurred.

The LogRocket Vuex plugin logs Vuex mutations to the LogRocket console, giving you context around what led to an error, and what state the application was in when an issue occurred.

Modernize how you debug your Vue apps - Start monitoring for free.