Toast notifications are an essential element of enhancing app user experience (UX) by providing quick and non-blocking feedback without interrupting the flow. In this comprehensive guide, we'll explore how to implement toast notifications in your Vue.js application using the Vue Sonner library.

What Are Toast Notifications?

Toast notifications, also known as toast messages or snackbar notifications, are small, temporary pop-up messages that appear on top of your interface. They usually display success messages, errors, warnings, and informational messages, providing users with instant feedback without losing context.

When to Use Toast Notification in Vue.js

Toast notifications are perfect for:

  • Notifying users of a successful form or profile update
  • Displaying error messages for failed network requests in the background
  • Confirming actions such as "item added to cart" or "email sent"
  • Alerting users of soft issues without blocking the screen
  • Notifying users of background tasks completed, such as exports or imports
  • Replacing old alert boxes with modern UI feedback

Install Vue Toast Notification Library

To get started, you'll need a Vue 3 project (Vite, Nuxt 3, or Vue CLI with Vue 3). Install the Vue Sonner library using your preferred package manager:

`

npm install vue-sonner

//or

yarn add vue-sonner

`

Create a Base Component for Toast Notification

Now, create a small wrapper around Vue Sonner. This base component will render the in your app and expose simple helper methods: showSuccessToast and showErrorToast.

Create AppToaster.vue in your src/components folder:

`html

`

This code provides a way to set up toast notifications in your app, displaying all toast notifications in the top right corner with a close button and using rich colors.

Add the Toast Component to Your Main Layout

To make sure all pages can show notifications, place AppToaster near the root layout. A common place is App.vue.

`html

`

The sits at the top level and listens for toast events. The ref lets you call the helper methods we exposed with defineExpose.

Vue Sonner Toast Notification Example

Now, let's see how to use Vue Sonner in a real-life example. Imagine a simple profile page where the user can save changes. You want:

  • A green success toast when the save works
  • A red error toast when something goes wrong

Example component using the AppToaster helpers on the profile page. Create ProfilePage.vue and modify as follows:

`html

`

In this example, when the user submits the form, it will show a toast notification based on the response. It will show a success response if the form is submitted successfully and an error toast if the submit fails.

Conclusion

With very little setup, you can integrate toast notifications into your Vue.js app with Vue Sonner and give your app's communication with the user a huge boost. In this tutorial, you've installed the Vue toast notification library, built a reusable AppToaster component, integrated it into your main layout, and fired off success and error toasts from a real page.

You now have a clean and modern way to display immediate, non-blocking feedback that looks and feels consistent throughout your app. From here, you can quickly customize the look and feel of your toasts, including positions, icons, and durations, to suit your brand or expand your setup to support additional message types such as info, warning, and loading.