Nuxt Snackbar

A Snackbar/Toast implementation for Nuxt that is independent of any CSS framework. Works with Nuxt 3 and Nuxt 4.

Nuxt Snackbar provides a wrapper for vue3-snackbar to be used with Nuxt.

• 📖  Documentation

Features

• Easy to integrate
• Instantly usable Snackbar, no config required
• Options to fully customize the snackbar (see all options)

Compatibility

Quick Setup

1. Add nuxt-snackbar dependency to your project

   npx nuxi@latest module add nuxt-snackbar
   

2. Add nuxt-snackbar to the modules section of nuxt.config.ts

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

3. Add the Snackbar Component to app.vue

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

   
   If you are using layouts and pages in your application, your app.vue should look something like this.

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

   
   If none of the above works, you can try adding it to layouts/default.vue instead

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

4. Call useSnackbar() to use snackbar methods and features.
   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'
               })
           }
       }
   }
   

That's it! You can now use Nuxt Snackbar in your Nuxt app ✨

Development

# Install dependencies
pnpm install

# Generate type stubs
pnpm dev:prepare

# Develop with the playground
pnpm dev

# Build the playground
pnpm dev:build

# Run ESLint
pnpm lint

# Run Vitest
pnpm test
pnpm test:watch

# Run type checks
pnpm test:types

Releases are published from CI: pushing a v* tag runs lint, tests, build, and publishes to npm (see .github/workflows/ltpr.yml).