Installation

This guide explains how to install Nuxt Notify in a Nuxt 3 or Nuxt 4 project.

Quick Install (Recommended)

npx

npx nuxt module add nuxt-notify

This will automatically install the package and register it in your Nuxt config.

Manual Installation

npm install nuxt-notify

pnpm add nuxt-notify

yarn add nuxt-notify

bun add nuxt-notify

Add Module to Nuxt Config

nuxt.config.ts

export default defineNuxtConfig({
  modules: ["nuxt-notify"],
});

Required Dependencies

Nuxt Notify depends on Tailwind CSS for styling and Nuxt Icon for icons.

Tailwind CSS Setup

You can use either Tailwind v3 or Tailwind v4.

Option A: Tailwind v3 (Recommended)

nuxi

npx nuxi@latest module add tailwindcss

Update your Nuxt config:

nuxt.config.ts

export default defineNuxtConfig({
  modules: ["@nuxtjs/tailwindcss", "nuxt-notify"],
});

Create assets/css/main.css:

assets/css/main.css

@tailwind base;
@tailwind components;
@tailwind utilities;

Option B: Tailwind v4 (Vite Plugin)

npm

npm install tailwindcss @tailwindcss/vite

Update nuxt.config.ts:

nuxt.config.ts

import tailwindcss from "@tailwindcss/vite";

export default defineNuxtConfig({
  modules: ["nuxt-notify"],
  vite: {
    plugins: [tailwindcss()],
  },
  css: ["~/assets/css/main.css"],
});

Create assets/css/main.css:

assets/css/main.css

@import "tailwindcss";
@import "nuxt-notify/styles";

For Tailwind v4, @import "nuxt-notify/styles" is required so Tailwind can detect Nuxt Notify components.

Nuxt Icon Setup

nuxi

npx nuxi@latest module add icon

If you disable icons using notify.showIcon = false, installing Nuxt Icon is optional.

Verify Installation

dev

npm run dev

The toast container is automatically mounted and ready to use.

Troubleshooting

Tailwind v4 Dark Mode

If dark mode styles are not applied correctly, add the following to your CSS file:

assets/css/main.css

@import "tailwindcss";
@import "nuxt-notify/styles";

@custom-variant dark (&:where(.dark, .dark *));