Stackable Toast Component For Vuetify – Sonner

A customizable, stackable toast/snackbar component for Vuetify.

How to use it:

1. Install and import the Sonner component.

<script setup lang="ts">
  import { VSonner, toast } from 'vuetify-sonner'

2. Enable a button to display a basic toast message.

    <VSonner />
    <VBtn @click="toast('This is a toast message')">

3. Append additional infomation to the toast message.

toast('Toast Title', {
  description: 'Toast Message Here',

4. Add an action button to the toast message. Somewhat similar to Material Design’s Snackbar UI.

toast('Event has been created', {
  action: {
    label: 'Action Button',
    onClick: () => console.log('Do something'),
    buttonProps: {
      // v-btn props

5. Available component props.

withDefaults(defineProps<Props>(), {
  // top-left, top-center, top-right, 
  // bottom-left, bottom-center, bottom-right, 
  position: 'bottom-center',
  hotkey: () => ['altKey', 'KeyT'],
  expand: false,
  visibleToasts: 3,
  offset: 32,


Stackable Toast Component For Vuetify Sonner

Download Details:

Author: wobsoriano

Live Demo:

Download Link:

Official Website:

Install & Download:

$ npm i vuetify-sonner

Add Comment