今日介紹　PrimeVue 的 Toast 組件實現這類即時通知。
適用情境:
當雙11等大促期間，網購平台的用戶點擊心儀的商品時，系統可以彈出提示訊息，
提醒用戶商品已成功加入購物車，這樣能提高用戶的參與感和滿足感。

第14天，心靈雞湯一下～

You must expect great things of yourself before you can do them.
你必須先見到很棒的自己，才能做出很棒的事。

配置文件

1. 配置 nuxt.config.ts**： 在 nuxt.config.ts 中添加 primevue.js 文件

export default defineNuxtConfig({
  primevue: {
    components: {
      prefix: "p-",
      include: [
        "toast",
      ]
    },
  },
  plugins: [{ src: '~/plugins/primevue.js', ssr: false }],
});

2. 新建 primevue.js 的文件
   由於是 Nuxt專案，plugins 目錄下創建一個名為 primevue.js 的文件
   並在其中引入 ToastService，這是控制 Toast 彈出消息所必需的。

import { defineNuxtPlugin } from '#app'
import ToastService from "primevue/toastservice";

export default defineNuxtPlugin((nuxtApp) => {
    nuxtApp.vueApp.use(PrimeVue);
    nuxtApp.vueApp.use(ToastService);
  });

主要用來註冊 PrimeVue 和 ToastService，使其能夠在 Nuxt 應用中全局使用。

使用 Composition API 的 useToast 函數

PrimeVue 的 Toast 元件依賴於 ToastService 來控制消息提示的彈出。

<template>
  <div class="card flex justify-content-center">
    <p-toast position="top-left" group="tl" />
    <p-toast position="bottom-left" group="bl" />
    <p-toast position="bottom-right" group="br" />

    <div class="flex flex-wrap gap-2">
      <p-button label="Top Left" @click="showTopLeft" />
      <p-button label="Bottom Left" severity="warning" @click="showBottomLeft" />
      <p-button label="Bottom Right" severity="help" @click="showBottomRight" />
    </div>
  </div>
</template>

<script setup>
import { useToast } from "primevue/usetoast";
const toast = useToast();

const showTopLeft = () => {
  toast.add({
    severity: "info",
    summary: "Info Message",
    detail: "Message Content",
    group: "tl",
    life: 3000,
  });
};

const showBottomLeft = () => {
  toast.add({
    severity: "warn",
    summary: "Warn Message",
    detail: "Message Content",
    group: "bl",
    life: 3000,
  });
};

const showBottomRight = () => {
  toast.add({
    severity: "success",
    summary: "Success Message",
    detail: "Message Content",
    group: "br",
    life: 3000,
  });
};
</script>

1. p-toast 元件：

• position 屬性指定 Toast 的顯示位置:top-left、bottom-left、bottom-right
• group 屬性:同一個頁面中顯示多個 Toast

2. useToast() 函數：

• toast.add() 用來觸發消息：
• severity: 定義消息的類型，通常為 info、success、warn、error。
• summary: 消息標題或摘要。
• detail: 消息的詳細內容。
• group: 對應 p-toast 中的 group 屬性，讓不同位置的 Toast 獨立顯示。
• life: 消息持續時間，單位為毫秒。

結語

這種即時通知都能大大提高用戶的互動感，讓用戶在操作商品時獲得即時反饋。

參考資料:
https://v3.primevue.org/toast/