Installation

Run the following command

pnpm dlx shadcn-vue@latest add toast

Add the Toaster component

Add the following Toaster component to your App.vue file:

App.vue

<script setup lang="ts">
import Toaster from '@/components/ui/toast/Toaster.vue'
</script>

<template>
  <Toaster />

  <!-- Nuxt  -->
  <ClientOnly>
    <Toaster />
  </ClientOnly>
</template>

Usage

The useToast hook returns a toast function that you can use to display a toast.

import { useToast } from '@/components/ui/toast/use-toast'

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

const { toast } = useToast()
</script>

<template>
  <Toaster />
  <Button
    @click="() => {
      toast({
        title: 'Scheduled: Catch up',
        description: 'Friday, February 10, 2023 at 5:57 PM',
      });
    }"
  >
    Add to calendar
  </Button>
</template>

To display multiple toasts at the same time, you can update the TOAST_LIMIT in use-toast.ts.

Examples

Simple

With Title

With Action

Destructive

Use toast({ variant: "destructive" }) to display a destructive toast.