Installation

Install dependencies

npm install vue-sonner

Add component

Copy and paste the code into your project's component directory.

Add it to your entry vue file

Render the Sonner component in the root of your app.

<template>
  ...
  <Sonner />
</template>

Usage

Import toast from vue-sonner and call that function to render a toast:

import { toast } from 'vue-sonner'

toast('Block has been mined')

For more on Sonner functionalities, check the vue-sonner.

Customization

If you want to customize the colors and use your tailwind.config.js psyui colors, edit your Sonner component - use the group-[.sonner]: to style it

<Sonner
  ...
  :toast-options="{
      classes: {
        ...,
        success: 'group-[.sonner]:text-brand-success',
        warning: 'group-[.sonner]:text-brand-warning',
        error: 'group-[.sonner]:text-brand-danger',
        info: 'group-[.sonner]:text-brand-info',
      }
    }"
/>