Vue · SSR safety
vite-doctor/vuessrwarnSuggestion
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 random or local time render, or move it to the Vue runtime/API that owns that behavior.
Example
Avoid random render output
Before
<template>
<span>{{ Math.random() }}</span>
</template>
After
<script setup lang="ts">
const id = useId()
</script>
<template>
<span>{{ id }}</span>
</template>
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-random-or-local-time-render