[Vue warn]: Hydration node/text/children mismatch Vue Origin: On your device OSI layer 7 · Application Last updated 5 Nov 2026

Vue: [Vue warn]: Hydration text content mismatch / Hydration node mismatch: server rendered element contains more child nodes than client vdom

Server-rendered HTML differs from what the client renders on first load.

Exact message you may see [Vue warn]: Hydration text content mismatchHydration node mismatch: - rendered on server: <div> - expected on client: <span>[Vue warn]: Hydration children mismatchHydration completed but contains mismatches[Vue warn]: Hydration class mismatch
Explore the map of this error Full error map →
Seen on: Vue

Meaning

Make first render deterministic: avoid Date.now(), Math.random(), window/localStorage checks in templates during SSR; render browser-only content inside onMounted or <ClientOnly> (Nuxt). Invalid HTML nesting (div in p) and extensions/CDN rewriting HTML also cause mismatches.

Common causes

  • Random/date values in render
  • Browser-only conditions (window width)
  • Invalid HTML nesting
  • Different data on server/client
  • Browser extensions or CDN modifying HTML

⚡ Quick fix

  1. Move client-only logic to onMounted / <ClientOnly>
  2. Use stable ids/data (useId)
  3. Fix invalid HTML structure

Detailed fix by platform

Vue

  1. const mounted = ref(false); onMounted(() => (mounted.value = true));

How to diagnose

  1. Value — Non-deterministic?
  2. Condition — Browser-only?
  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):

ESLint Parsing error in .vue files — ESLint: Parsing error: Unexpected token < / Parsing error: '>' expected (vue-eslint-parser not configured) (Vue)ESLint Parsing error …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: Hydration completed but contained mismatches — Nuxt: [Vue warn]: Hydration completed but contains mismatches. (Vue)Nuxt: Hydration compl…Nuxt: window/document/localStorage is not defined (SSR) — Nuxt: ReferenceError: window is not defined / 500 Internal Server Error during SSR (Vue)Nuxt: window/document…Prop did not match — Warning: Prop `className` did not match. Server: "x" Client: "y" (React)Prop did not matchReferenceError: document is not defined — Next.js: ReferenceError: document is not defined (Next.js)ReferenceError: docum…ReferenceError: localStorage is not defined — Next.js: ReferenceError: localStorage is not defined / sessionStorage is not defined (Next.js)ReferenceError: local…[Vue warn…

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.