snackbar

Go to documentation

Nuxt Snackbar module using vue3-snackbar

1 maintainer

3k installs

9 stars

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

# Using pnpm
pnpm add nuxt-snackbar

# Using yarn
yarn add nuxt-snackbar

# Using npm
npm install nuxt-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>
  <main>
    Main Content
  </main>
  <NuxtSnackbar />
</template>

If you are using layouts and pages in your application

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

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

<template>
  <slot />
  <NuxtSnackbar />
</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