Nuxt · NUXT0033
Use useCookie for SSR-visible browser preference state
Finds Nuxt hydration code that should use the supported usecookie for initial client state pattern instead.
nuxt/hydration/prefer-usecookie-for-initial-client-statesrc/rule-packs/nuxt/rules/nuxt/prefer-use-cookie-for-initial-client-state.ts Upstream docs Run this rule
pnpm nuxt doctor --rules nuxt/hydration/prefer-usecookie-for-initial-client-state
Why it matters
Server-rendered markup must match the first client render. Browser-only state, time, randomness, or hash-sensitive URLs can create hydration mismatches.
Recommended fix
Use the Nuxt-supported usecookie for initial client state pattern instead.
Useful links
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>