👨‍🏫 The Mastering Nuxt 3 course is now completed!

Discover the course
snackbar

Nuxt Snackbar module using vue3-snackbar

Nuxt Snackbar

npm versionnpm downloadsLicenseNuxt

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