nuxt-toastify

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

• Install the module to your Nuxt application with one command:

  npx nuxi module add nuxt-toastify
  

• While the module is zero config, if you want to override configs you can start by adding toastify config in nuxt.config.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.

• Call useToastify in your project to trigger toasts.

  <template>
    <div>
      <button @click="testToastify">Click me</button>
    </div>
  </template>
  
  <script setup>
  function testToastify() {
    useToastify("Wow so easy !", {
      autoClose: 1000,
      position: ToastifyOption.POSITION.TOP_RIGHT,
    });
  }
  </script>
  

  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

Any valid pull requests will be accepted. Thank you.

Local development

# 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

Changelog

v1.0.0

compare changes

🏡 Chore

• Add package manager version (81a78f9)
• Upgrade packages (3d8ae9a)

❤️ Contributors

• Modbender