
snackbar
Go to documentationNuxt Snackbar module using vue3-snackbar
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
- Add
nuxt-snackbar
dependency to your project# Using pnpmpnpm add nuxt-snackbar# Using yarnyarn add nuxt-snackbar# Using npmnpm install nuxt-snackbar - Add
nuxt-snackbar
to themodules
section ofnuxt.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>
- Call
useSnackbar()
to use snackbar methods and features.
Composition APIconst snackbar = useSnackbar();snackbar.add({type: 'success',text: 'This is a snackbar message'})
Options APIexport 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