Vue · SSR safety
vite-doctor/vuessrerrorSuggestion
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