Vue · SSR safety

VUE0011Do not read browser APIs in SSR setup paths

Flags browser API in setup in Vue SSR 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 API in setup, or move it to the Vue runtime/API that owns that behavior.

Example

Move browser API usage to mounted

Before

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

After

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

Verify the fix

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

pnpm vite-doctor . --framework vue --rules vue/ssr/no-browser-api-in-setup
Copyright © 2026