Nuxt Snackbar

特に Nuxt 3 向けの CSS フレームワークに依存しない Snackbar/トーストの実装

Nuxt Snackbar は、Nuxt.js で使用するために vue3-snackbar のラッパーを提供します。

特徴

• 簡単に統合可能
• 設定不要ですぐに使える Snackbar
• スナックバーを完全にカスタマイズするオプション (すべての オプション を参照)

クイックセットアップ

1. プロジェクトに nuxt-snackbar 依存関係を追加します

   npx nuxi@latest module add snackbar
   

2. nuxt.config.ts の modules セクションに nuxt-snackbar を追加します

   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. Snackbar のメソッドと機能を使用するには、useSnackbar() を呼び出します。
   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