nuxt-snackbar
v1.1.2
Published
Nuxt Snackbar module using vue3-snackbar
Downloads
7,334
Maintainers
Readme
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 projectnpx nuxi@latest module add 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> <div> <main> Main Content </main> <NuxtSnackbar /> </div> </template>
If you are using layouts and pages in your application, your
app.vue
should look something like this.<template> <NuxtLayout> <NuxtPage /> <NuxtSnackbar /> </NuxtLayout> </template>
If none of the above works, you can try adding it to
layouts/default.vue
instead<template> <div> <slot /> <NuxtSnackbar /> </div> </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