shadcn-vue/apps/www/src/content/docs/components/toast.md

title	description	source	primitive
Toast	A succinct message that is displayed temporarily.	apps/www/src/lib/registry/default/ui/toast	https://www.radix-vue.com/components/toast.html

Installation

Run the following command

npx shadcn-vue@latest add toast

Add the Toaster component

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

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

<template>
  <Toaster />
</template>

Usage

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

import { useToast } from '{{codeConfig.aliases.components}}/ui/toast/use-toast'

<script setup lang="ts">
import { {{codeConfig.prefix}}Button } from '{{codeConfig.aliases.components}}/ui/button'
import { useToast } from '{{codeConfig.aliases.components}}/ui/toast/use-toast'

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

<template>
  <{{codeConfig.prefix}}Button
    @click="() => {
      toast({
        title: 'Scheduled: Catch up',
        description: 'Friday, February 10, 2023 at 5:57 PM',
      });
    }"
  >
    Add to calander
  </{{codeConfig.prefix}}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.