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

**Code:** `[Vue warn]: Hydration node/text/children mismatch` · **Category:** Vue · **Seen on:** Vue

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

## 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?

---
Source: [WhatIsMyError](https://whatismyerror.com/errors/vue/vue-warn-hydration-mismatch)