nuxt-toastify v1.0.0

• ✨  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:

   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:

    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.

   <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.