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>

如果您的应用程序中使用布局和页面，您的 app.vue 应该如下所示。

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

如果以上方法都不起作用，您可以尝试将其添加到 layouts/default.vue 中

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

调用 useSnackbar() 以使用 snackbar 方法和功能。
组合式 API

const snackbar = useSnackbar();

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

选项式 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