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 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>
If you are using layouts and pages in your application, yourapp.vue
should look something like this.<template> <NuxtLayout> <NuxtPage /> </NuxtLayout> <NuxtSnackbar /> </template>
If none of the above works, you can try adding it tolayouts/default.vue
instead<template> <slot /> <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 dependenciesyarn install# Generate type stubsyarn dev:prepare# Develop with the playgroundyarn dev# Build the playgroundyarn dev:build# Run ESLintyarn lint# Run Vitestyarn testyarn test:watch# Release new versionyarn release