Vue · VUE0012

Avoid random or local-time SSR render values

Flags random or local time render in Vue SSR code before it leaks into runtime behavior.

VUE0012vite-doctor/vuessrwarnSuggestion

vue/ssr/no-random-or-local-time-rendersrc/rule-packs/vue/rules/vue/no-random-or-local-time-render.ts Upstream docs

Run this rule

pnpm vite-doctor . --framework vue --rules vue/ssr/no-random-or-local-time-render

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

Remove random or local time render, or move it to the Vue runtime/API that owns that behavior.

Useful links

Rule reference

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>