Nuxt Snackbar

一種獨立於 CSS 框架的 Snackbar/Toast 實現，尤其適用於 Nuxt 3

Nuxt Snackbar 為 vue3-snackbar 提供了一個包裝器，以便與 Nuxt.js 一起使用。

功能

• 易於整合
• 即時可用的 Snackbar，無需配置
• 可完全自定義 Snackbar 的選項（檢視所有選項）

快速設定

1. 將 nuxt-snackbar 依賴新增到您的專案中

   npx nuxi@latest module add snackbar
   

2. 將 nuxt-snackbar 新增到 nuxt.config.ts 的 modules 部分

   export default defineNuxtConfig({
     modules: ['nuxt-snackbar'],
     snackbar: {
       bottom: true,
       right: true,
       duration: 5000
     }
   })
   

3. 將 Snackbar 元件新增到 app.vue

   <template>
     <div>
       <main>
         Main Content
       </main>
       <NuxtSnackbar />
     </div>
   </template>
   

   
   如果您在應用程式中使用佈局和頁面，您的 app.vue 應該如下所示。

    <template>
      <NuxtLayout>
        <NuxtPage />
        <NuxtSnackbar />
      </NuxtLayout>
    </template>
   

   
   如果以上方法都不起作用，您可以嘗試將其新增到 layouts/default.vue

   <template>
     <div>
       <slot />
       <NuxtSnackbar />
     </div>
   </template>
   

4. 呼叫 useSnackbar() 以使用 snackbar 方法和功能。
   組合式 API

   const snackbar = useSnackbar();
   
   snackbar.add({
       type: 'success',
       text: 'This is a snackbar message'
   })
   

   
   Options API

   export default {
       methods: {
           successMessage() {
               this.$snackbar.add({
                   type: 'success',
                   text: 'This is a snackbar message'
               })
           }
       }
   }
   

就這樣！您現在可以在 Nuxt 應用程式中使用 Nuxt Snackbar 了 ✨

開發

# Install dependencies
yarn install

# Generate type stubs
yarn dev:prepare

# Develop with the playground
yarn dev

# Build the playground
yarn dev:build

# Run ESLint
yarn lint

# Run Vitest
yarn test
yarn test:watch

# Release new version
yarn release