Nuxt · Hydration & SSR

NUXT0029Avoid browser globals in universal code

Flags browser global in universal code in Nuxt hydration code before it leaks into runtime behavior.

Why it happens

Server-rendered markup must match the first client render. Browser-only state, time, randomness, or hash-sensitive URLs can create hydration mismatches.

Fix

Remove browser global in universal code, or move it to the Nuxt runtime/API that owns that behavior.

Example

Avoid browser globals in universal render

Before

<script setup lang="ts">
const width = window.innerWidth
</script>

<template>{{ width }}</template>

After

<script setup lang="ts">
const width = ref<number>()
onMounted(() => { width.value = window.innerWidth })
</script>

<template>{{ width }}</template>

Verify the fix

Run only this rule after editing so the report stays focused on the diagnostic you are closing:

pnpm nuxt doctor --rules nuxt/hydration/no-browser-global-in-universal-code
Copyright © 2026