Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/modbender/nuxt-snackbar
A Nuxt Snackbar/Toast Implementation independent of CSS framework
https://github.com/modbender/nuxt-snackbar
nuxt nuxt-module nuxtjs snackbar toast vue
Last synced: 2 days ago
JSON representation
A Nuxt Snackbar/Toast Implementation independent of CSS framework
- Host: GitHub
- URL: https://github.com/modbender/nuxt-snackbar
- Owner: modbender
- License: mit
- Created: 2023-03-09T09:52:37.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2024-08-03T09:42:08.000Z (4 months ago)
- Last Synced: 2024-10-11T18:46:16.507Z (about 1 month ago)
- Topics: nuxt, nuxt-module, nuxtjs, snackbar, toast, vue
- Language: TypeScript
- Homepage: https://nuxt.com/modules/snackbar
- Size: 252 KB
- Stars: 25
- Watchers: 2
- Forks: 6
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md
Awesome Lists containing this project
README
# 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](https://github.com/craigrileyuk/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](https://github.com/craigrileyuk/vue3-snackbar#props))
## Quick Setup
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
```
If none of the above works, you can try adding it to `layouts/default.vue` 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 ✨
## Development
```bash
# 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
```
[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