nuxt-snackbar
TypeScript icon, indicating that this package has built-in type declarations

1.0.4 • Public • Published

Nuxt Snackbar

npm version npm downloads License Nuxt

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

  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>

    If you are using layouts and pages in your application, your app.vue should look something like this.

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

Readme

Keywords

none

Package Sidebar

Install

npm i nuxt-snackbar

Weekly Downloads

1,003

Version

1.0.4

License

MIT

Unpacked Size

9.08 kB

Total Files

19

Last publish

Collaborators

  • modbender