Implement Toast Notifications in Vue.js Using Vue Sonner

Toast Notifications in Vue.js give your users quick, non-blocking feedback without interrupting their flow. Instead of heavy modals or full-page alerts, you can show small messages in the corner of the screen that disappear after a short time.

In this vue js toast message tutorial, you will learn how to set up vue js toast notification using vue sonner, create a reusable base component, plug it into your layout, and trigger clean success and error messages from anywhere in your app.

What Are Toast Notifications?

A toast notification is a small, temporary pop-up message that appears on top of your interface. It usually shows:

Success messages
Errors
Warnings
Informational messages

You often see them after saving a form, adding an item to a cart, or when something fails in the background. They improve the perceived speed and behaviour of your app because users receive instant feedback without losing context.

When to use toast notification in Vue js

Here are common use cases and why you should use them:

Notify users of a successful form or profile update
Display an error message for a failed network request in the background
Confirm actions such as “item added to cart” or “email sent”
Alert users of soft issues without blocking the screen
Notify users of background tasks completed, such as exports or imports
Replace old alert boxes with modern UI feedback

Install the vue toast notification library vue sonner

To follow this vue js toast notification using vue sonner guide, you need a Vue 3 project (Vite, Nuxt 3, or Vue CLI with Vue 3).

Install vue-sonner

Use your favourite package manager:

npm install vue-sonner
//or
yarn add vue-sonner
//or
yarn add vue-sonner

It will download required files and install it into your vue.js application.

Create a base component for toast notification in Vue js

Now we create a small wrapper around vue-sonner. This base component will render the <Toaster> in app. It will import css and Expose simple helper methods: showSuccessToast and showErrorToast.

Create AppToaster.vue in your src/components folder:

<script setup lang="ts">
import 'vue-sonner/style.css'
import { Toaster } from 'vue-sonner'
</script>

<template>
  <Toaster
    position="top-right"
    :duration="4000"
    close-button
    rich-colors
    expand
    theme="system"
  />
</template>

This part of the code provides a way to set up toast notifications in your app. It imports the default styles of vue-sonner, displays all the toast notifications in the top right corner, and uses rich colors with a close button. This helps to keep all the toast logic in one place and makes your application look clean and polished.

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.

<template>
  <AppToaster />

  <main class="app-shell">
    <router-view />
  </main>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import AppToaster from './components/AppToaster.vue'

const appToaster = ref()
</script>

The <AppToaster /> 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 you will see how to use vue sonner in vue js with 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 profile page. Create ProfilePage.vue and modify as below:

<template>
  <section class="profile-page">
    <h1 class="text-xl font-semibold">Edit profile</h1>

    <form @submit.prevent="handleSave" class="space-y-4">
      <label class="block">
        <span>Name</span>
        <input v-model="name" type="text" class="border px-3 py-2 rounded w-full" />
      </label>

      <button
        type="submit"
        class="px-4 py-2 rounded bg-blue-600 text-white hover:bg-blue-700"
        :disabled="isSaving"
      >
        {{ isSaving ? 'Saving...' : 'Save changes' }}
      </button>
    </form>

    <div class="mt-6 flex gap-3">
      <button
        class="px-3 py-2 rounded bg-green-600 text-white"
        @click="showSampleSuccess"
      >
        Show success toast
      </button>

      <button
        class="px-3 py-2 rounded bg-red-600 text-white"
        @click="showSampleError"
      >
        Show error toast
      </button>
    </div>
  </section>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { toast } from 'vue-sonner'

const name = ref('Jane Doe')
const isSaving = ref(false)

const handleSave = async () => {
  isSaving.value = true

  try {
    await new Promise(resolve => setTimeout(resolve, 800))
    toast.success('Profile updated successfully')
  } catch (error) {
    toast.error('Could not update profile. Please try again.')
  } finally {
    isSaving.value = false
  }
}
</script>

In this example, when user submits form it will show toast notification based on response. It will show success response if form is submitted and show error toast on 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 have 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.

Codewolfy