Nuxt Toastify

Wrapper for Vue3 Toastify for easy & instant Notifications/Toasts in Nuxt 3 App.

-----
- ✨  Release Notes
- 🏀  Online Demo | Online Playground
- 📖  Documentation

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 for all configs and it's default values.

3. Call useToastify in your project to trigger toasts.

`xhtml



`

Refer to Toast Props 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

[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