https://github.com/wobsoriano/vuetify-sonner
Stackable toast component for Vuetify.
https://github.com/wobsoriano/vuetify-sonner
snackbar toast vue vuetify
Last synced: 5 months ago
JSON representation
Stackable toast component for Vuetify.
- Host: GitHub
- URL: https://github.com/wobsoriano/vuetify-sonner
- Owner: wobsoriano
- License: mit
- Created: 2023-07-04T18:24:59.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2025-03-14T06:48:26.000Z (7 months ago)
- Last Synced: 2025-05-15T03:07:19.638Z (5 months ago)
- Topics: snackbar, toast, vue, vuetify
- Language: Vue
- Homepage: https://vuetify-sonner.vercel.app
- Size: 312 KB
- Stars: 137
- Watchers: 3
- Forks: 9
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
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](https://m2.material.io/components/snackbars#behavior).
## Installation
```bash
npm install vuetify-sonner
```
## Usage
Add `` 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.
```vue
import { VSonner, toast } from 'vuetify-sonner'
// Required for snackbar background and text color
import 'vuetify-sonner/style.css'
Give me a toast
```
### Default
Most basic toast. You can customize it by passing an options object as the second argument.
```js
toast('My first toast')
```
With description:
```js
toast('Event has been created', {
description: 'Monday, January 3rd at 6:00pm',
})
```
### Action
Renders a button.
```js
toast('Event has been created', {
action: {
label: 'Undo',
onClick: () => console.log('Undo'),
buttonProps: {
// v-btn props
}
},
})
```
## Customization
Behind the scenes, the toast component uses Vuetify [Cards](https://vuetifyjs.com/en/components/cards/), as the snackbar component has its own overlay logic.
### Position
You can change the position through the `position` prop on the `` component. Default is `bottom-center`.
```vue
```
### 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.
```vue
```
### Toast Options
```js
toast('Event has been created', {
description: 'Some more context of the notification', // subtitle of the snackbar
cardProps: {
color: 'success',
class: 'my-toast',
// v-card props
},
cardTextProps: {
// v-card-text props
},
cardActionsProps: {
// v-card-actions props
},
prependIcon: 'mdi-check-circle',
prependIconProps: {
// v-icon props
},
progressBar: boolean, // show or hide countdown progress bar
progressBarProps: {
// v-progress-linear props
},
reverseProgressBar: boolean, // changes progress bar direction
loading: boolean, // makes progressbar indeterminate
avatar: 'https://url.to/my/image.jpg', // avatar image url,
multipleAvatars: [
'https://url.to/image/1.jpg',
'https://url.to/image/2.jpg',
'https://url.to/image/3.jpg'
// will display first 5 images
],
avatarProps: {
// v-avatar props
}
})
```
### Programmatically remove toast
To remove a toast programmatically use `toast.dismiss(id)`.
```js
const toastId = toast('Event has been created')
toast.dismiss(toastId)
```
You can also use the dismiss method without the id to dismiss all toasts.
```js
// Removes all toasts
toast.dismiss()
```
### Duration
You can change the duration of each toast by using the `duration` property, or change the duration of all toasts like this:
```vue
```
```js
toast('Event has been created', {
duration: 10000,
})
// Persisent toast
toast('Event has been created', {
duration: Number.POSITIVE_INFINITY,
})
```
### 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).
```js
toast('Event has been created', {
onDismiss: t => console.log(`Toast with id ${t.id} has been dismissed`),
onAutoClose: t => console.log(`Toast with id ${t.id} has been closed automatically`),
})
```
### 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.
```vue
```
### 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.
```js
// Using Vue-Sonners Promise toast
import { toast } from 'vuetify-sonner'
const promise = () => new Promise(resolve => setTimeout(resolve, 2000))
toast.toastOriginal
.promise(promise, {
loading: 'Loading...',
success: (data) => {
return `${data} toast has been added`
},
error: (data: any) => 'Error',
})
```
See [here for more on using vue-sonner](https://vue-sonner.vercel.app/)
## Nuxt Usage
```ts
export default defineNuxtConfig({
build: {
transpile: ['vue-sonner']
}
})
```
```vue
import { VSonner, toast } from 'vuetify-sonner'
Give me a toast
```
## License
MIT