nuxt-snackbar

Nuxt Snackbar

A Snackbar/Toast Implementation independent of CSS framework especially for Nuxt 3

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

Features

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

Quick Setup

• Add nuxt-snackbar dependency to your project

  npx nuxi@latest module add snackbar
  

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

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

• 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>
  

• 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
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