Nuxt Snackbar

一個獨立於 CSS 框架的 Snackbar/Toast 實作，特別為 Nuxt 3 設計

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

功能特色

易於整合
即時可用的 Snackbar，無需設定
可完整自訂 snackbar 的選項 (請參閱所有選項)

快速設定

將 nuxt-snackbar 依賴項新增至您的專案
```
npx nuxi@latest module add snackbar
```

將 nuxt-snackbar 新增至 nuxt.config.ts 的 modules 區段

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

將 Snackbar 元件新增至 app.vue

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

如果您在應用程式中使用 layouts 和 pages，您的 app.vue 應該看起來像這樣。

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

如果以上方法都不行，您可以嘗試將其新增至 layouts/default.vue

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

呼叫 useSnackbar() 以使用 snackbar 方法和功能。
Composition 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