Wrapper for Vue 3 Toastify
npm install nuxt-toastify
Wrapper for Vue3 Toastify for easy & instant Notifications/Toasts in Nuxt 3 App.

-----
- ✨ Release Notes
- 🏀 Online Demo | Online Playground
- 📖 Documentation
- 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 !
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 ✨
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