Introduction

Nuxt Notify is a modern toast notification module built specifically for Nuxt 3 and Nuxt 4.
It focuses on clean defaults, developer experience, and full control when you need it.

Whether you need a simple success message or a fully interactive notification with actions, avatars, and progress indicators — Nuxt Notify has you covered.

Why Nuxt Notify?

Nuxt Notify is designed to feel native to Nuxt while remaining lightweight and flexible.

• ✨ Nuxt 3 & Nuxt 4 Ready
  Built for modern Nuxt projects with full Composition API support.
• 🚀 Zero Configuration
  Automatically mounts the toast container — no boilerplate or manual setup.
• 🎨 Tailwind CSS Friendly
  Style everything using Tailwind utilities or your own design system.
• 💅 Nuxt Icon Integration
  Use any icon from Nuxt Icon with zero effort.
• 📍 Flexible Positioning
  Top, bottom, corners, or center — adapt to your layout.
• ⚙️ Per-Toast Customization
  Control duration, appearance, behavior, and layout per toast.
• 🔘 Action Buttons
  Add interactive actions with callbacks for real workflows.
• 👤 Avatar Support
  Display user avatars or custom visuals in notifications.
• ⏱️ Progress Indicators
  Visual timers with pause-on-hover support.
• 🎭 Theme Support
  Light, dark, and system themes out of the box.

When should you use it?

Nuxt Notify is a great fit if you want:

• A production-ready toast system
• A Nuxt-native API that feels natural
• Full control over UI without fighting defaults
• Minimal setup with powerful features available on demand

Prerequisites

Before getting started, make sure you have:

• Node.js 18 or later
• A Nuxt 3 or Nuxt 4 project
• Basic familiarity with Vue 3 and Nuxt

Next, head over to the Installation guide to get Nuxt Notify running in your project.