Nuxt: Hydration completed but contained mismatches Vue Origin: On your device OSI layer 7 · Application Last updated 5 Nov 2026

Nuxt: [Vue warn]: Hydration completed but contains mismatches.

Server HTML and client render differed; Vue patched the DOM but logs the mismatch.

Exact message you may see Hydration completed but contains mismatches.[Vue warn]: Hydration completed but contains mismatches.Nuxt Hydration completed but contains mismatchesHydration node mismatch Nuxt SSR[Vue warn]: Hydration text content mismatch Nuxt
Explore the map of this error Full error map →
Seen on: Vue

Meaning

Same causes as Vue SSR: non-deterministic values (Date.now, Math.random), browser-only data (localStorage, window.innerWidth), invalid HTML nesting, or async data that differs. Use useState for shared values, <ClientOnly>, onMounted, and stable ids (useId). Check Nuxt DevTools and the console diff.

Common causes

  • Random/time values in templates
  • Browser-only checks during SSR
  • Invalid HTML (div in p)
  • Different data on server/client
  • Third-party scripts altering DOM before hydration

⚡ Quick fix

  1. Use useState or useAsyncData for shared data
  2. Wrap client-only parts in <ClientOnly>
  3. Fix HTML nesting; use useId()

Detailed fix by platform

Nuxt

  1. <ClientOnly><MapWidget /><template #fallback>Loading…</template></ClientOnly>

How to diagnose

  1. Value — Deterministic?
  2. Component — ClientOnly?
  3. HTML — Valid?

🔧 Still not fixed?

Many errors look alike. If the steps above didn’t solve it, one of these is probably what you’re facing:

Where this error sits

Origin: On your device. Errors that are often confused with or caused by this one (click to open):

[Vue warn]: Failed to locate Teleport target with selector — Vue: [Vue warn]: Failed to locate Teleport target with selector "#modal". Note the target element must exist before the component is mounted (Vue)[Vue warn]: Failed to…[Vue warn]: Hydration node/text/children mismatch — Vue: [Vue warn]: Hydration text content mismatch / Hydration node mismatch: server rendered element contains more child nodes than client vdom (Vue)[Vue warn]: Hydration…Hydration error: <div> cannot be a descendant of <p> — Next.js: Warning: validateDOMNesting(...): <div> cannot appear as a descendant of <p> / In HTML, <p> cannot be a descendant of <p>. This will cause a hydration error (Next.js)Hydration error: <div…Hydration failed — Error: Hydration failed because the initial UI does not match what was rendered on the server (React)Hydration failedNuxt 404: Page not found (route/file naming) — Nuxt: 404 Page not found: /blog/my-post / [Vue Router warn]: No match found for location with path (Vue)Nuxt 404: Page not fo…Nuxt: Failed to fetch dynamically imported module (after deploy) — Nuxt: [nuxt] error caught during app initialization TypeError: Failed to fetch dynamically imported module / Loading chunk failed (Vue)Nuxt: Failed to fetch…Nuxt: window/document/localStorage is not defined (SSR) — Nuxt: ReferenceError: window is not defined / 500 Internal Server Error during SSR (Vue)Nuxt: window/document…Nuxt/Vite: Failed to resolve import "~/..." or "@/..." — Nuxt: [vite] Internal server error: Failed to resolve import "~/components/Foo.vue" from "pages/index.vue". Does the file exist? (Vue)Nuxt/Vite: Failed to …Nuxt: Hyd…

Explore the map of this error Full error map →

🧠 Still stuck? Analyze your error

Paste the full message, response headers or stack trace — we'll detect the platform and point to the most likely cause.

💬 What worked for others

No tips yet — did something else fix this for you?

Share what worked for you

Tips are checked by an editor before they appear. Links are removed.