vue-sonner
Advanced tools
[![NPM][npmBadge]][npmUrl] [![Minzip Package][bundlePhobiaBadge]][bundlePhobiaUrl] [![NPM Download][npmDtBadge]][npmDtUrl]
An opinionated toast component for Vue. It's a Vue port of Sonner
https://user-images.githubusercontent.com/6118824/228208185-be5aefd4-7fa8-4f95-a41c-88a60c0e2800.mp4
Vue Sonner is an opinionated toast component for Vue. It's customizable, but styled by default. Comes with a swipe to dismiss animation.
To start using the library, install it in your project:
pnpm install vue-sonner
or
yarn add vue-sonner
<!-- App.vue -->
<template>
<Toaster />
<button @click="() => toast('My first toast')">Render a toast</button>
</template>
<script lang="ts" setup>
import { Toaster, toast } from 'vue-sonner'
</script>
Define a nuxt plugin
// plugins/sonner.client.ts
import { Toaster, toast } from 'vue-sonner'
export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.vueApp.component('Toaster', Toaster)
return {
provide: {
toast
}
}
})
Use Toaster component and $toast function anywhere in the Vue SFC
<!-- app.vue -->
<template>
<div>
<NuxtPage />
<Toaster position="top-right" />
<button @click="() => $toast('My first toast')">Render a toast</button>
</div>
</template>
<script setup lang="ts">
// alternatively, you can also use it here
const { $toast } = useNuxtApp()
</script>
Add the build transpile for vue-sonner
// nuxt.config.ts
import { defineNuxtConfig } from 'nuxt/config'
export default defineNuxtConfig({
...
build: {
transpile: ['vue-sonner']
}
})
EMS version
https://cdn.jsdelivr.net/npm/vue-sonner/+esm
UMD version
https://www.unpkg.com/vue-sonner@0.3.1/lib/vue-sonner.umd.cjs
Most basic toast. You can customize it (and any other type) by passing an options object as the second argument.
toast('Event has been created')
With custom description:
toast('Event has been created', {
description: 'Monday, January 3rd at 6:00pm'
})
Renders a checkmark icon in front of the message.
toast.success('Event has been created')
Renders an error icon in front of the message.
toast.error('Event has not been created')
Renders a button.
toast('Event has been created', {
action: {
label: 'Undo',
onClick: () => console.log('Undo')
}
})
Starts in a loading state and will update automatically after the promise resolves or fails.
You can pass a function to the success/error messages to incorporate the result/error of the promise.
toast.promise(() => new Promise((resolve) => setTimeout(resolve, 2000)), {
loading: 'Loading',
success: (data: any) => 'Success',
error: (data: any) => 'Error'
})
You can pass a Vue Component as the first argument instead of a string to render custom Component while maintaining default styling. You can use the headless version below for a custom, unstyled toast.
<script lang="ts" setup>
import { defineComponent, h, markRaw } from 'vue'
const CustomDiv = defineComponent({
setup() {
return () =>
h('div', {
innerHTML: 'A custom toast with unstyling'
})
}
})
toast(markRaw(CustomDiv))
</script>
You can use toast.custom to render an unstyled toast with custom jsx while maintaining the functionality.
<script lang="ts" setup>
import { markRaw } from 'vue'
import HeadlessToast from './HeadlessToast.vue'
toast.custom(markRaw(HeadlessToast), { duration: 999999 })
</script>
You can change the theme using the theme prop. Default theme is light.
<Toaster theme="dark" />
You can change the position through the position prop on the <Toaster /> component. Default is top-right.
<!-- Available positions -->
<!-- top-left, top-center, top-right, bottom-left, bottom-center, bottom-right -->
<Toaster position="top-center" />
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.
<Toaster expand :visibleToasts="9" />
You can style your toasts globally with the toastOptions prop in the Toaster component.
<Toaster
:toastOptions="{
style: { background: 'red' },
class: 'my-toast',
descriptionClass: 'my-toast-description'
}"
/>
toast('Event has been created', {
style: {
background: 'red'
},
class: 'my-toast',
descriptionClass: 'my-toast-description'
})
The preferred way to style the toasts with tailwind is by using the unstyled prop. That will give you an unstyled toast which you can then style with tailwind.
<Toaster
:toastOptions="{
unstyled: true,
classes: {
toast: 'bg-blue-400',
title: 'text-red-400',
description: 'text-red-400',
actionButton: 'bg-zinc-400',
cancelButton: 'bg-orange-400',
closeButton: 'bg-lime-400'
}
}"
/>
You can do the same when calling toast().
toast('Hello World', {
unstyled: true,
classes: {
toast: 'bg-blue-400',
title: 'text-red-400 text-2xl',
description: 'text-red-400',
actionButton: 'bg-zinc-400',
cancelButton: 'bg-orange-400',
closeButton: 'bg-lime-400'
}
})
Styling per toast type is also possible.
<Toaster
:toastOptions="{
unstyled: true,
classes: {
error: 'bg-red-400',
success: 'text-green-400',
warning: 'text-yellow-400',
info: 'bg-blue-400',
}
}"
/>
You can change the default icons using slots:
<Toaster>
<template #loading-icon>
<LoadingIcon />
</template>
<template #success-icon>
<SuccessIcon />
</template>
<template #error-icon>
<ErrorIcon />
</template>
<template #info-icon>
<InfoIcon />
</template>
<template #warning-icon>
<WarningIcon />
</template>
</Toaster>
Add a close button to all toasts that shows on hover by adding the closeButton prop.
<Toaster closeButton />
You can make error and success state more colorful by adding the richColors prop.
<Toaster richColors />
Offset from the edges of the screen.
<Toaster offset="80px" />
To remove a toast programmatically use toast.dismiss(id).
const toastId = toast('Event has been created')
toast.dismiss(toastId)
You can also use the dismiss method without the id to dismiss all toasts.
toast.dismiss()
You can change the duration of each toast by using the duration property, or change the duration of all toasts like this:
<Toaster :duration="10000" />
toast('Event has been created', {
duration: 10000
})
// Persisent toast
toast('Event has been created', {
duration: Infinity
})
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).
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`)
})
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.
<Toaster hotkey="['KeyC']" />
MIT @xiaoluoboding
FAQs
[![NPM][npmBadge]][npmUrl] [![Minzip Package][bundlePhobiaBadge]][bundlePhobiaUrl] [![NPM Download][npmDtBadge]][npmDtUrl]
The npm package vue-sonner receives a total of 48,829 weekly downloads. As such, vue-sonner popularity was classified as popular.
We found that vue-sonner demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
PyPI confirms no security flaws were exploited in the Ultralytics supply chain attack and highlights improvements for safer package publishing.
Security News
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.