https://github.com/wobsoriano/vuetify-sonner/assets/13049130/3dc381ec-95b2-4bd1-9df6-624210e9d9f4

vuetify-sonner

Stackable toast component for Vuetify.

[!IMPORTANT] Snackbars should appear one at a time. This component breaks the Material spec.

Installation

1npm install vuetify-sonner

Usage

Add <VSonner /> to your app, it will be the place where all your toasts will be rendered. After that you can use toast() from anywhere in your app.

1<script setup lang="ts">
2import { VSonner, toast } from 'vuetify-sonner'
3// Required for snackbar background and text color
4import 'vuetify-sonner/style.css'
5</script>
6
7<template>
8  <VApp>
9    <VSonner />
10    <VBtn @click="toast('My first toast')">
11      Give me a toast
12    </VBtn>
13  </VApp>
14</template>

Default

Most basic toast. You can customize it by passing an options object as the second argument.

1toast('My first toast')

With description:

1toast('Event has been created', {
2  description: 'Monday, January 3rd at 6:00pm',
3})

Action

Renders a button.

1toast('Event has been created', {
2  action: {
3    label: 'Undo',
4    onClick: () => console.log('Undo'),
5    buttonProps: {
6      // v-btn props
7    }
8  },
9})

Customization

Behind the scenes, the toast component uses Vuetify Cards, as the snackbar component has its own overlay logic.

Position

You can change the position through the position prop on the <VSonner /> component. Default is bottom-center.

1<VSonner position="top-center" />

Expanded

Toasts can also be expanded by default through the expand prop. You can also change the amount of visible toasts which is 3 by default.

1<VSonner expand :visible-toasts="9" />

Toast Options

1toast('Event has been created', {
2  description: 'Some more context of the notification' // subtitle of the snackbar
3  cardProps: {
4    color: 'success',
5    class: 'my-toast',
6    // v-card props
7  },
8  cardTextProps: {
9    // v-card-text props
10  },
11  cardActionsProps: {
12    // v-card-actions props
13  },
14  prependIcon: 'mdi-check-circle',
15  prependIconProps: {
16    // v-icon props
17  },
18  progressBar: boolean, // show or hide countdown progress bar
19  progressBarProps: {
20    // v-progress-linear props
21  },
22  reverseProgressBar: boolean // changes progress bar direction
23  loading: boolean, // makes progressbar indeterminate
24  avatar: 'https://url.to/my/image.jpg' // avatar image url,
25  multipleAvatars: [
26    'https://url.to/image/1.jpg',
27    'https://url.to/image/2.jpg',
28    'https://url.to/image/3.jpg'
29    // will display first 5 images
30  ],
31  avatarProps: {
32    // v-avatar props
33  }
34})

Programmatically remove toast

To remove a toast programmatically use toast.dismiss(id).

1const toastId = toast('Event has been created')
2
3toast.dismiss(toastId)

You can also use the dismiss method without the id to dismiss all toasts.

1// Removes all toasts
2
3toast.dismiss()

Duration

You can change the duration of each toast by using the duration property, or change the duration of all toasts like this:

1<VSonner :duration="10000" />

1toast('Event has been created', {
2  duration: 10000,
3})
4
5// Persisent toast
6toast('Event has been created', {
7  duration: Number.POSITIVE_INFINITY,
8})

On Close Callback

You can pass onDismiss and onAutoClose callbacks. onDismiss gets fired when either the close button gets clicked or the toast is swiped. onAutoClose fires when the toast disappears automatically after it's timeout (duration prop).

1toast('Event has been created', {
2  onDismiss: t => console.log(`Toast with id ${t.id} has been dismissed`),
3  onAutoClose: t => console.log(`Toast with id ${t.id} has been closed automatically`),
4})

Keyboard focus

You can focus on the toast area by pressing ⌥/alt + T. You can override it by providing an array of event.code values for each key.

1<VSonner :hotkey="['KeyC']" />

Use Underlying Vue-Sonner

vuetify-sonner, as a wrapper over the vue-sonner library, grants access to all the underlying methods and properties of vue-sonner by using the toast.toastOriginal property, e.g.

1// Using Vue-Sonners Promise toast
2import { toast } from 'vuetify-sonner'
3
4const promise = () => new Promise((resolve) => setTimeout(resolve, 2000));
5
6toast.toastOriginal
7  .promise(promise, {
8    loading: 'Loading...', 
9    success: (data) => {
10      return `${data} toast has been added`;
11    },
12    error: (data: any) => 'Error',
13  });

See here for more on using vue-sonner

Nuxt Usage

1export default defineNuxtConfig({
2  build: {
3    transpile: ['vue-sonner']
4  }
5})

1<script setup lang="ts">
2import { VSonner, toast } from 'vuetify-sonner'
3</script>
4
5<template>
6  <VApp>
7    <ClientOnly>
8      <VSonner />
9    </ClientOnly>
10    <VBtn @click="toast('My first toast')">
11      Give me a toast
12    </VBtn>
13  </VApp>
14</template>

License

MIT