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 pnpmpnpm add nuxt-snackbar# Using yarnyarn add nuxt-snackbar# Using npmnpm install 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>
     <main>
       Main Content
     </main>
     <NuxtSnackbar />
   </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 dependenciesnpm install# Generate type stubsnpm run dev:prepare# Develop with the playgroundnpm run dev# Build the playgroundnpm run dev:build# Run ESLintnpm run lint# Run Vitestnpm run testnpm run test:watch# Release new versionnpm run release