关于

Sonner 组件由 vue-sonner 提供，它是 Sonner 的 Vue 移植版本，最初由 Emil Kowalski 为 React 创建。

安装

运行以下命令

pnpm dlx shadcn-vue@latest add sonner

添加 Toaster 组件

将以下 Toaster 组件添加到您的 App.vue 文件中：

App.vue

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

<template>
  <Toaster />

  <!-- Nuxt, vue-sonner v1 因为通过 JS 将内联 CSS 插入到 head 标签 -->
  <ClientOnly>
    <Toaster />
  </ClientOnly>

  <!-- Nuxt, vue-sonner v2 无需 ClientOnly -->
  <Toaster />
</template>

用法

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

<template>
  <Button
    variant="outline" @click="() => {
      toast('事件已创建', {
        description: '2023年12月3日，星期日，上午9:00',
        action: {
          label: '撤销',
          onClick: () => console.log('撤销'),
        },
      })
    }"
  >
    添加到日历
  </Button>
</template>

示例

带对话框的 Sonner

相关议题 https://github.com/unovue/shadcn-vue/issues/462

在您的 App.vue 文件中为 Toaster 组件添加 pointer-events-auto 类：

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

<template>
  <Toaster class="pointer-events-auto" />
</template>