Installation

pnpm install vue-sonner

Usage

Render the toaster in the root of your app.

<!-- App.vue -->
<template>
  <!-- ... -->
  <Toaster />
  <button @click="() => toast('My first toast')">
    Give me a toast
  </button>
</template>

<script lang="ts" setup>
import { Toaster, toast } from 'vue-sonner'
</script>

Types

You can customize the type of toast you want to render, and pass an options object as the second argument.

toast('Event has been created')

Position

You can customize the type of toast you want to render, and pass an options object as the second argument.

<Toaster position="top-right" />

Expand

You can change the number of visible toasts through the visibleToasts prop, the default is 3 toasts.

<Toaster :expand="false" />

Theme

You can smoothly switch between light mode and dark mode.

<Toaster theme="light" />

Styling

You can style your toasts globally with the toastOptions prop in the Toaster component.

<Toaster
  :toastOptions="{
    style: { background: '#fda4af' },
    class: 'my-toast',
    descriptionClass: 'my-toast-description'
  }"
/>

Others

toast.success('Event has been created')

// ...

<Toaster richColors  />