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

**Code:** `Nuxt: Hydration completed but contained mismatches` · **Category:** Vue · **Seen on:** Vue

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

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

---
Source: [WhatIsMyError](https://whatismyerror.com/errors/vue/nuxt-hydration-completed-but-contained-mismatches)