NUXT0033Use useCookie for SSR-visible browser preference state

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

Use the Nuxt-supported usecookie for initial client state pattern instead.

Example

Use cookies for initial client state

Before

<script setup lang="ts">
const theme = ref(localStorage.getItem('theme') || 'light')
</script>

After

<script setup lang="ts">
const theme = useCookie('theme', { default: () => 'light' })
</script>

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/prefer-usecookie-for-initial-client-state

Useful links

• Upstream docs

Related rule

• nuxt/hydration/prefer-usecookie-for-initial-client-state