Installation

pnpm dlx shadcn-vue@latest add sonner

Usage

<script setup lang="ts">
import { toast } from 'vue-sonner'
import { Button } from '@/components/ui/button'
</script>

<template>
  <Button @click="() => toast('My first toast')">
    Give me a toast
  </Button>
</template>

Installation

Komponen <Toaster /> beserta CSS-nya wajib ada supaya toast bisa tampil. Pasang keduanya di layout paling luar aplikasi Anda.

<script setup lang="ts">
import 'vue-sonner/style.css'
import { Toaster } from '@/components/ui/sonner'
</script>

<template>
  <div>
    <main>
      <!-- Your app content -->
    </main>
    <Toaster />
  </div>
</template>

Examples

Tipe

Dengan Dialog