https://github.com/modbender/nuxt-toastify
Wrapper for Vue3 Toastify for easy & instant Notifications/Toasts in Nuxt 3 App
https://github.com/modbender/nuxt-toastify
Last synced: about 1 year ago
JSON representation
Wrapper for Vue3 Toastify for easy & instant Notifications/Toasts in Nuxt 3 App
- Host: GitHub
- URL: https://github.com/modbender/nuxt-toastify
- Owner: modbender
- License: mit
- Created: 2024-08-03T19:33:03.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2025-01-14T08:21:07.000Z (over 1 year ago)
- Last Synced: 2025-04-01T10:36:12.660Z (about 1 year ago)
- Language: TypeScript
- Size: 604 KB
- Stars: 5
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
Nuxt Toastify
Wrapper for Vue3 Toastify for easy & instant Notifications/Toasts in Nuxt 3 App.
-----
- ✨ [Release Notes](/CHANGELOG.md)
- 🏀 [Online Demo](https://vue3-toastify.js-bridge.com/) | [Online Playground](https://stackblitz.com/github/modbender/nuxt-toastify?file=playground%2Fapp.vue)
- 📖 [Documentation](https://vue3-toastify.js-bridge.com/get-started/introduction.html)
## Features
- Beautiful by default
- Easy to set up for real, you can make it work in less than 10sec!
- Super easy to customize
- RTL support
- You can limit the number of toast displayed at the same time
- Super easy to use an animation of your choice. Works well with animate.css for example
- Can display a Vue3 component inside the toast!
- Has onOpen and onClose hooks. Both can access the props passed to the vue3 component rendered inside the toast
- Can remove a toast programmatically
- Define behavior per toast
- Pause toast when the window loses focus 👁
- Fancy progress bar to display the remaining time
- Possibility to update a toast
- support dangerously html string render (default: false).
- Dark mode 🌒, automatic detection for system dark mode (html.dark)
- Colored theme
- Promise support
- And much more !
## Quick Setup
1. Install the module to your Nuxt application with one command:
```bash
npx nuxi module add nuxt-toastify
```
2. While the module is zero config, if you want to override configs you can start by adding `toastify` config in `nuxt.config.ts`:
```ts
export default defineNuxtConfig({
modules: ['nuxt-toastify'],
toastify: {
autoClose: 2000,
position: 'top-right',
theme: 'auto',
},
})
```
Refer to [Container Props](https://vue3-toastify.js-bridge.com/api/container.html) for all configs and it's default values.
3. Call `useToastify` in your project to trigger toasts.
```xhtml
Click me
function testToastify() {
useToastify("Wow so easy !", {
autoClose: 1000,
position: ToastifyOption.POSITION.TOP_RIGHT,
});
}
```
Refer to [Toast Props](https://vue3-toastify.js-bridge.com/api/toast.html) for all configs and default values to pass to composable `useToastify`.
That's it! You can now use Nuxt Toastify in your Nuxt app ✨
## Contribution
Any valid pull requests will be accepted. Thank you.
Local development
```bash
# Install dependencies
npm install
# Generate type stubs
npm run dev:prepare
# Develop with the playground
npm run dev
# Build the playground
npm run dev:build
# Run ESLint
npm run lint
# Run Vitest
npm run test
npm run test:watch
# Release new version
npm run release
```
[npm-version-src]: https://img.shields.io/npm/v/nuxt-toastify/latest.svg?style=flat&colorA=020420&colorB=00DC82
[npm-version-href]: https://npmjs.com/package/nuxt-toastify
[npm-downloads-src]: https://img.shields.io/npm/dm/nuxt-toastify.svg?style=flat&colorA=020420&colorB=00DC82
[npm-downloads-href]: https://npmjs.com/package/nuxt-toastify
[license-src]: https://img.shields.io/npm/l/nuxt-toastify.svg?style=flat&colorA=020420&colorB=00DC82
[license-href]: https://npmjs.com/package/nuxt-toastify
[nuxt-src]: https://img.shields.io/badge/Nuxt-020420?logo=nuxt.js
[nuxt-href]: https://nuxt.com