Duplicate $alert notifications appear after SSR hydration in Nuxt 3 with @nuxtjs/alert

Answer – Quick Fix

Nuxt 3 has no built‑in flag to suppress re‑emission of alerts that were already rendered on the server. The standard, supported way to avoid duplicates is to ensure the $alert call runs only on the client side:

1. Wrap the call in if (process.client) { … } inside setup() or a composable.
2. Or move the call into onMounted() so it never executes during SSR.

Either approach guarantees that the alert is triggered only once – after hydration.

Why the Duplicate Happens

• Code in setup() or top‑level lifecycle hooks runs on both the server and the client during hydration.
• When $alert is called in that shared code, the server renders the message into the HTML, and the client immediately re‑triggers it.
• The @nuxtjs/alert module does not expose a message ID or deduplication API, so the client has no way to know the alert was already shown.

No Alternative Config Exists

There is no Nuxt 3 lifecycle hook or module option that can skip hydration of alert state. The module’s state is purely client‑side and is not synced from the server.

Practical Verification

// Example – guard in setup
import { useAlert } from "@nuxtjs/alert";
export default {
  setup() {
    const alert = useAlert();
    if (process.client) {
      alert.error("Page loaded");
    }
  }
}

After adding the guard, refresh the page and confirm that a single alert appears.

Need More Context?

If you are calling $alert inside a composable that is imported by both server‑side and client‑side code, the same guard pattern applies. Let me know if the alert is triggered by a router hook or a plugin, and I can suggest a more targeted guard.