Nuxt Snackbar

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

1. Add nuxt-snackbar dependency to your project

   # Using pnpm
   pnpm add nuxt-snackbar
   # Using yarn
   yarn add nuxt-snackbar
   # Using npm
   npm install nuxt-snackbar

   Copy to clipboard
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
     }
   })

   Copy to clipboard
3. Add the Snackbar Component to app.vue

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

   Copy to clipboard
4. Call useSnackbar() to use snackbar methods and features.
   Composition API

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

   Copy to clipboard
   
   Options API

   export default {
       methods: {
           successMessage() {
               this.$snackbar.add({
                   type: 'success',
                   text: 'This is a snackbar message'
               })
           }
       }
   }

   Copy to clipboard

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

Development

# Install dependencies
npm install
# Generate type stubs
npm run dev:prepare
# Develop with the playground
npm run dev
# Build the playground
npm run dev:build
# Run ESLint
npm run lint
# Run Vitest
npm run test
npm run test:watch
# Release new version
npm run release