Toast 与通知

操作成功后给一句轻量反馈，比弹窗更不打断用户。Nuxt UI 用 toast.add() 在屏幕角落弹出一条会自动消失的提示，另外 UAlert 用于页面内常驻的提示条，UBadge 用于给元素打小标签。

本篇基于 /453.html 接好的环境，注意 toast 依赖根容器 UApp。

toast.add 轻提示

在 <script setup> 里调用 toast.add() 即可弹出提示，标题、颜色、图标都能配。

<template>
  <UButton @click="notify">保存成功</UButton>
</template>

<script setup>
function notify() {
  toast.add({
    title: '保存成功',
    description: '你的修改已生效',
    color: 'success',
    icon: 'i-lucide-circle-check'
  })
}
</script>

toast 是 Nuxt UI 自动导入的 composable，不用 import。常用字段。

• title 主标题。
• description 补充说明。
• color 用语义色（success/error/info/warning），决定左侧颜色和图标基调。
• icon 自定义图标（见 图标 Icon）。
• duration 停留毫秒数，默认几秒后自动消失。

错误提示

提交失败时用 error 色把问题反馈给用户，配合 表单与输入 的提交场景很自然。

<script setup>
function onSubmit() {
  // 假设请求失败
  toast.add({
    title: '保存失败',
    description: '网络异常，请重试',
    color: 'error',
    icon: 'i-lucide-alert-triangle'
  })
}
</script>

UAlert 常驻提示条

toast 会自动消失，UAlert 是留在页面上的提示条，适合展示「重要通知」「操作指引」这类需要用户看到的内容。

<template>
  <UAlert
    icon="i-lucide-info"
    color="info"
    variant="soft"
    title="温馨提示"
    description="本功能每日凌晨更新数据。"
  />
</template>

variant 这里用 soft 是浅底色样式，和按钮的变体概念一致。

UBadge 状态标签

UBadge 是小的状态标签，常放在列表、表格里标示状态（如「已发布」「待审核」）。

<template>
  <UBadge color="success" variant="subtle">已发布</UBadge>
  <UBadge color="warning" variant="subtle">待审核</UBadge>
  <UBadge color="neutral" variant="outline">草稿</UBadge>
</template>

在 数据表格 UTable 的单元格里套 UBadge，是展示状态列的常见做法。

常见问题

参考资料

• Nuxt UI Toast 文档
• Nuxt UI Alert 文档
• Nuxt UI Badge 文档