A Nuxt Snackbar/Toast Implementation independent of CSS framework
MIT License
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
Add nuxt-snackbar
dependency to your project
npx nuxi@latest module add 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>
<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 ✨
# 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