Nuxt Snackbar module using vue3-snackbar
npm install nuxt-snackbar[![npm version][npm-version-src]][npm-version-href]
[![npm downloads][npm-downloads-src]][npm-downloads-href]
[![License][license-src]][license-href]
[![Nuxt][nuxt-src]][nuxt-href]
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
1. Add nuxt-snackbar dependency to your project
``bash`
npx nuxi@latest module add snackbar
2. Add nuxt-snackbar to the modules section of nuxt.config.ts
`js`
export default defineNuxtConfig({
modules: ['nuxt-snackbar'],
snackbar: {
bottom: true,
right: true,
duration: 5000
}
})
3. Add the Snackbar Component to app.vue
`xml`
Main Content
If you are using layouts and pages in your application, your app.vue should look something like this.
`xml`
layouts/default.vue
If none of the above works, you can try adding it to instead`
xml`
5. Call useSnackbar() to use snackbar methods and features.
Composition API
`js
const snackbar = useSnackbar();
snackbar.add({
type: 'success',
text: 'This is a snackbar message'
})
`
Options API
`js`
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 ✨
`bashInstall dependencies
yarn install
[npm-version-src]: https://img.shields.io/npm/v/nuxt-snackbar/latest.svg?style=flat&colorA=18181B&colorB=28CF8D
[npm-version-href]: https://npmjs.com/package/nuxt-snackbar
[npm-downloads-src]: https://img.shields.io/npm/dm/nuxt-snackbar.svg?style=flat&colorA=18181B&colorB=28CF8D
[npm-downloads-href]: https://npmjs.com/package/nuxt-snackbar
[license-src]: https://img.shields.io/npm/l/nuxt-snackbar.svg?style=flat&colorA=18181B&colorB=28CF8D
[license-href]: https://npmjs.com/package/nuxt-snackbar
[nuxt-src]: https://img.shields.io/badge/Nuxt-18181B?logo=nuxt.js
[nuxt-href]: https://nuxt.com