VUE0010Use data-allow-mismatch only surgically

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

Use the Vue-supported data allow mismatch surgical pattern instead.

Example

Scope allowed mismatch narrowly

Before

<template>
  <main data-allow-mismatch>
    <UserProfile />
  </main>
</template>

After

<template>
  <time data-allow-mismatch>{{ formattedNow }}</time>
</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/data-allow-mismatch-surgical

Useful links

• Upstream docs

Related rule

• vue/ssr/data-allow-mismatch-surgical