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'
</script>

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

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

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,
})

Preview:

Download Details:

Author: wobsoriano

Live Demo: https://vuetify-sonner.vercel.app/

Download Link: https://github.com/wobsoriano/vuetify-sonner/archive/refs/heads/main.zip

Official Website: https://github.com/wobsoriano/vuetify-sonner

Install & Download:

# NPM
$ npm i vuetify-sonner