Hydration completed but contains mismatches

Error Message

[Vue warn]: Hydration completed but contains mismatches.
  at <NuxtPage>
  at <App>

Root Cause

A component used Math.random() to generate an element ID during SSR. The server rendered one value; the browser generated a different value on hydration — mismatch.

Fix

// Before (broken) — different each render
const id = Math.random().toString(36).slice(2)

// After (fixed option 1) — stable ID with useId()
const id = useId()

// After (fixed option 2) — defer browser-only code
const isClient = ref(false)
onMounted(() => { isClient.value = true })

Takeaway

Anything producing a different value on server vs client (Math.random, Date.now, window) causes a hydration mismatch. Use useId() for IDs and onMounted to defer client-only logic.