From c322afaac909349097f9d3bef49b00f00442e04c Mon Sep 17 00:00:00 2001
From: Julien Huang <julien.h.dev@gmail.com>
Date: Sun, 23 Nov 2025 23:20:42 +0100
Subject: [PATCH 01/12] feat: hydration issues across tabs and reloads

---
 client/app/components/HydrationIssue.vue | 34 +++++++++-------
 client/app/composables/host.ts           |  2 +-
 client/app/pages/hydration.vue           |  2 +-
 client/app/pages/index.vue               |  4 +-
 client/app/plugins/hydration.ts          | 25 ++++++++++++
 package.json                             |  1 +
 pnpm-lock.yaml                           |  3 ++
 src/module.ts                            | 15 ++++++-
 src/runtime/hydration/composables.ts     | 51 ++++++++----------------
 src/runtime/hydration/handler.nitro.ts   | 47 ++++++++++++++++++++++
 src/runtime/hydration/sse.nitro.ts       | 18 +++++++++
 src/runtime/hydration/types.ts           | 19 +++++++++
 src/runtime/hydration/utils.ts           | 32 +++++++++++++++
 src/runtime/types.d.ts                   | 12 +++++-
 14 files changed, 207 insertions(+), 58 deletions(-)
 create mode 100644 client/app/plugins/hydration.ts
 create mode 100644 src/runtime/hydration/handler.nitro.ts
 create mode 100644 src/runtime/hydration/sse.nitro.ts
 create mode 100644 src/runtime/hydration/types.ts
 create mode 100644 src/runtime/hydration/utils.ts

diff --git a/client/app/components/HydrationIssue.vue b/client/app/components/HydrationIssue.vue
index 780d421..fb3e4d3 100644
--- a/client/app/components/HydrationIssue.vue
+++ b/client/app/components/HydrationIssue.vue
@@ -1,18 +1,29 @@
-<script setup lang="ts">
+<script setup lang="ts" generic="Issue extends LocalHydrationMismatch | HydrationMismatchPayload">
 import { codeToHtml } from 'shiki/bundle/web'
-import type { ComponentInternalInstance, VNode } from 'vue'
 import { diffLines, type ChangeObject } from 'diff'
 import { transformerNotationDiff } from '@shikijs/transformers'
+import type { HydrationMismatchPayload, LocalHydrationMismatch } from '../../../src/runtime/hydration/types'
 
 const props = defineProps<{
-  issue: { instance: ComponentInternalInstance, vnode: VNode, htmlPreHydration: string | undefined, htmlPostHydration: string | undefined }
+  issue: Issue
 }>()
 
 type MaybeNamed = Partial<Record<'name' | '__name' | '__file', string>>
-const componentName = computed(() => (props.issue.instance.type as MaybeNamed).name ?? (props.issue.instance.type as MaybeNamed).__name ?? 'AnonymousComponent')
-const filePath = computed(() => (props.issue.instance.type as MaybeNamed).__file as string | undefined)
-const rootTag = computed(() => (props.issue.instance.vnode.el as HTMLElement | null)?.tagName?.toLowerCase() || 'unknown')
-const element = computed(() => props.issue.instance.vnode.el as HTMLElement | undefined)
+
+const isLocalIssue = (issue: HydrationMismatchPayload | LocalHydrationMismatch): issue is LocalHydrationMismatch => {
+  return 'instance' in issue && 'vnode' in issue
+}
+
+const componentName = computed(() => props.issue.componentName ?? 'Unknown component')
+const filePath = computed(() => isLocalIssue(props.issue)
+  ? (props.issue.instance.type as MaybeNamed).name
+  ?? (props.issue.instance.type as MaybeNamed).__name
+  ?? (props.issue.instance.type as MaybeNamed).__file
+  ?? 'Unknown component'
+  : (props.issue as HydrationMismatchPayload).fileLocation,
+)
+
+const element = computed(() => isLocalIssue(props.issue) ? props.issue.instance.vnode.el as HTMLElement | undefined : undefined)
 
 const { highlightElement, inspectElementInEditor, clearHighlight } = useElementHighlighter()
 
@@ -66,17 +77,10 @@ function copy(text: string) {
         <div class="text-xs text-neutral-500 truncate">
           {{ filePath }}
         </div>
-        <div class="mt-1 flex flex-wrap gap-2 text-[11px]">
-          <n-tip
-            size="small"
-            title="Root element tag where mismatch was detected."
-          >
-            root: {{ rootTag }}
-          </n-tip>
-        </div>
       </div>
       <div class="shrink-0 flex items-center gap-2">
         <n-button
+          v-if="element"
           size="small"
           quaternary
           title="Open in editor"
diff --git a/client/app/composables/host.ts b/client/app/composables/host.ts
index d2320ec..12b72d3 100644
--- a/client/app/composables/host.ts
+++ b/client/app/composables/host.ts
@@ -50,7 +50,7 @@ export function useHostHydration() {
   return { hydration: host.__hints.hydration }
 }
 
-function useHostNuxt() {
+export function useHostNuxt() {
   const client = useDevtoolsClient().value
 
   if (!client) {
diff --git a/client/app/pages/hydration.vue b/client/app/pages/hydration.vue
index bdb6a8f..4e9f94b 100644
--- a/client/app/pages/hydration.vue
+++ b/client/app/pages/hydration.vue
@@ -3,7 +3,7 @@ definePageMeta({
   title: 'Hydration',
 })
 
-const { hydration } = useHostHydration()
+const hydration = useNuxtApp().$hydrationMismatches
 </script>
 
 <template>
diff --git a/client/app/pages/index.vue b/client/app/pages/index.vue
index b2599fb..29bc6e9 100644
--- a/client/app/pages/index.vue
+++ b/client/app/pages/index.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 const { allMetrics } = useHostWebVitals()
-const { hydration } = useHostHydration()
+const hydration = useNuxtApp().$hydrationMismatches
 
-const hydrationCount = computed(() => hydration.length || 0)
+const hydrationCount = computed(() => hydration.value.length)
 </script>
 
 <template>
diff --git a/client/app/plugins/hydration.ts b/client/app/plugins/hydration.ts
new file mode 100644
index 0000000..48716a0
--- /dev/null
+++ b/client/app/plugins/hydration.ts
@@ -0,0 +1,25 @@
+import type { HydrationMismatchPayload, HydrationMismatchResponse, LocalHydrationMismatch } from '../../../src/runtime/hydration/types'
+
+export default defineNuxtPlugin(() => {
+  const host = useHostNuxt()
+
+  const hydrationMismatches = ref<(HydrationMismatchPayload | LocalHydrationMismatch)[]>([])
+
+  hydrationMismatches.value = [...host.__hints.hydration]
+
+  $fetch<HydrationMismatchResponse>(new URL('/__nuxt_hydration', window.location.origin).href).then((data: { mismatches: HydrationMismatchPayload[] }) => {
+    hydrationMismatches.value = [...hydrationMismatches.value, ...data.mismatches.filter(m => !hydrationMismatches.value.some(existing => existing.id === m.id))]
+  })
+
+  const eventSource = new EventSource(new URL('/__nuxt_hydration/sse', window.location.origin).href)
+  eventSource.addEventListener('message', (event) => {
+    const mismatch: HydrationMismatchPayload = JSON.parse(event.data)
+    hydrationMismatches.value.push(mismatch)
+  })
+
+  return {
+    provide: {
+      hydrationMismatches,
+    },
+  }
+})
diff --git a/package.json b/package.json
index 55e9d25..6133b1c 100644
--- a/package.json
+++ b/package.json
@@ -53,6 +53,7 @@
     "@nuxt/icon": "^2.0.0",
     "@nuxt/module-builder": "^1.0.0",
     "@nuxt/schema": "^4.1.2",
+    "@nuxt/hints": "workspace:^",
     "@nuxt/test-utils": "^3.19.2",
     "@shikijs/transformers": "^3.15.0",
     "@types/node": "^24.0.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 0512fdb..852d65a 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -48,6 +48,9 @@ importers:
       '@nuxt/eslint':
         specifier: ^1.9.0
         version: 1.10.0(@typescript-eslint/utils@8.47.0(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3))(@vue/compiler-sfc@3.5.24)(eslint@9.39.1(jiti@2.6.1))(magicast@0.5.1)(typescript@5.9.3)(vite@7.2.4(@types/node@24.10.1)(jiti@2.6.1)(sass-embedded@1.93.3)(sass@1.93.3)(terser@5.44.1)(yaml@2.8.1))
+      '@nuxt/hints':
+        specifier: workspace:^
+        version: 'link:'
       '@nuxt/icon':
         specifier: ^2.0.0
         version: 2.1.0(magicast@0.5.1)(vite@7.2.4(@types/node@24.10.1)(jiti@2.6.1)(sass-embedded@1.93.3)(sass@1.93.3)(terser@5.44.1)(yaml@2.8.1))(vue@3.5.24(typescript@5.9.3))
diff --git a/src/module.ts b/src/module.ts
index 8e81f04..959874f 100644
--- a/src/module.ts
+++ b/src/module.ts
@@ -1,4 +1,5 @@
-import { defineNuxtModule, addPlugin, createResolver, addBuildPlugin, addComponent, addServerPlugin } from '@nuxt/kit'
+import { defineNuxtModule, addPlugin, createResolver, addBuildPlugin, addComponent, addServerPlugin, addServerHandler } from '@nuxt/kit'
+import { HYDRATION_ROUTE, HYDRATION_SSE_ROUTE } from './runtime/hydration/utils'
 import { setupDevToolsUI } from './devtools'
 import { InjectHydrationPlugin } from './plugins/hydration'
 
@@ -19,6 +20,8 @@ export default defineNuxtModule<ModuleOptions>({
     if (!nuxt.options.dev) {
       return
     }
+    nuxt.options.nitro.experimental = nuxt.options.nitro.experimental || {}
+    nuxt.options.nitro.experimental.websocket = true
 
     const resolver = createResolver(import.meta.url)
 
@@ -28,12 +31,20 @@ export default defineNuxtModule<ModuleOptions>({
     // hydration
     addPlugin(resolver.resolve('./runtime/hydration/plugin.client'))
     addBuildPlugin(InjectHydrationPlugin)
+    addServerHandler({
+      route: HYDRATION_ROUTE,
+      handler: resolver.resolve('./runtime/hydration/handler.nitro'),
+    })
+    addServerHandler({
+      route: HYDRATION_SSE_ROUTE,
+      handler: resolver.resolve('./runtime/hydration/sse.nitro'),
+    })
+
     addComponent({
       name: 'NuxtIsland',
       filePath: resolver.resolve('./runtime/core/components/nuxt-island'),
       priority: 1000,
     })
-
     // third-party scripts
     addPlugin(resolver.resolve('./runtime/third-party-scripts/plugin.client'))
     addServerPlugin(resolver.resolve('./runtime/third-party-scripts/nitro.plugin'))
diff --git a/src/runtime/hydration/composables.ts b/src/runtime/hydration/composables.ts
index e2ba098..27f3bbd 100644
--- a/src/runtime/hydration/composables.ts
+++ b/src/runtime/hydration/composables.ts
@@ -1,36 +1,7 @@
 import { getCurrentInstance, onMounted } from 'vue'
 import { useNuxtApp } from '#imports'
-
-function formatHTML(html: string | undefined): string {
-  if (!html) return ''
-
-  // Simple HTML formatting function
-  let formatted = ''
-  let indent = 0
-  const tags = html.split(/(<\/?[^>]+>)/g)
-
-  for (const tag of tags) {
-    if (!tag.trim()) continue
-
-    if (tag.startsWith('</')) {
-      indent--
-      formatted += '\n' + '  '.repeat(Math.max(0, indent)) + tag
-    }
-    else if (tag.startsWith('<') && !tag.endsWith('/>') && !tag.includes('<!')) {
-      formatted += '\n' + '  '.repeat(Math.max(0, indent)) + tag
-      indent++
-    }
-    else if (tag.startsWith('<')) {
-      formatted += '\n' + '  '.repeat(Math.max(0, indent)) + tag
-    }
-    else {
-      formatted += '\n' + '  '.repeat(Math.max(0, indent)) + tag.trim()
-    }
-  }
-
-  return formatted.trim()
-}
-
+import { HYDRATION_ROUTE, formatHTML } from './utils'
+import type { HydrationMismatchPayload } from './types'
 /**
  * prefer implementing onMismatch hook after vue 3.6
  * compare element
@@ -47,17 +18,27 @@ export function useHydrationCheck() {
 
   if (!instance) return
 
-  const htmlPrehydration = formatHTML(instance.vnode.el?.outerHTML)
+  const htmlPreHydration = formatHTML(instance.vnode.el?.outerHTML)
   const vnodePrehydration = instance.vnode
 
   onMounted(() => {
     const htmlPostHydration = formatHTML(instance.vnode.el?.outerHTML)
-    if (htmlPrehydration !== htmlPostHydration) {
+    if (htmlPreHydration !== htmlPostHydration) {
+      const payload: HydrationMismatchPayload = {
+        htmlPreHydration: htmlPreHydration,
+        htmlPostHydration: htmlPostHydration,
+        id: globalThis.crypto.randomUUID(),
+        componentName: instance.type.name ?? instance.type.displayName ?? instance.type.__name,
+        fileLocation: instance.type.__file ?? 'unknown',
+      }
       nuxtApp.__hints.hydration.push({
+        ...payload,
         instance,
         vnode: vnodePrehydration,
-        htmlPreHydration: htmlPrehydration,
-        htmlPostHydration,
+      })
+      $fetch(new URL(HYDRATION_ROUTE, window.location.origin), {
+        method: 'POST',
+        body: payload,
       })
       console.warn(`[nuxt/hints:hydration] Component ${instance.type.name ?? instance.type.displayName ?? instance.type.__name ?? instance.type.__file} seems to have different html pre and post-hydration. Please make sure you don't have any hydration issue.`)
     }
diff --git a/src/runtime/hydration/handler.nitro.ts b/src/runtime/hydration/handler.nitro.ts
new file mode 100644
index 0000000..d7107b1
--- /dev/null
+++ b/src/runtime/hydration/handler.nitro.ts
@@ -0,0 +1,47 @@
+import type { H3Event } from 'h3'
+import { createError, defineEventHandler, readBody, setResponseStatus } from 'h3'
+import type { HydrationMismatchPayload } from './types'
+import { useNitroApp } from 'nitropack/runtime'
+
+const hydrationMistmatches: HydrationMismatchPayload[] = []
+
+export default defineEventHandler((event) => {
+  if (event.method === 'GET') {
+    console.log('called')
+    return getHandler()
+  }
+  else if (event.method === 'POST') {
+    return postHandler(event)
+  }
+
+  throw createError({ statusCode: 405, statusMessage: 'Method Not Allowed' })
+})
+
+function getHandler() {
+  return {
+    mismatches: hydrationMistmatches,
+  }
+}
+
+async function postHandler(event: H3Event) {
+  const body = await readBody<HydrationMismatchPayload>(event)
+  assertPayload(body)
+  const nitro = useNitroApp()
+  const payload = { id: body.id, htmlPreHydration: body.htmlPreHydration, htmlPostHydration: body.htmlPostHydration, componentName: body.componentName, fileLocation: body.fileLocation }
+  hydrationMistmatches.push(payload)
+  console.log('Received hydration mismatch:', hydrationMistmatches.length)
+  nitro.hooks.callHook('hints:hydration:mismatch', payload)
+  setResponseStatus(event, 201)
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function assertPayload(body: any): asserts body is HydrationMismatchPayload {
+  if (
+    typeof body !== 'object'
+    || typeof body.id !== 'string'
+    || (body.htmlPreHydration !== undefined && typeof body.htmlPreHydration !== 'string')
+    || (body.htmlPostHydration !== undefined && typeof body.htmlPostHydration !== 'string')
+  ) {
+    throw createError({ statusCode: 400, statusMessage: 'Invalid payload' })
+  }
+}
diff --git a/src/runtime/hydration/sse.nitro.ts b/src/runtime/hydration/sse.nitro.ts
new file mode 100644
index 0000000..fbde850
--- /dev/null
+++ b/src/runtime/hydration/sse.nitro.ts
@@ -0,0 +1,18 @@
+import { createEventStream, defineEventHandler } from 'h3'
+import { useNitroApp } from 'nitropack/runtime'
+
+export default defineEventHandler((event) => {
+  const nitro = useNitroApp()
+  const eventStream = createEventStream(event)
+
+  const unsub = nitro.hooks.hook('hints:hydration:mismatch', (mismatch) => {
+    eventStream.push(JSON.stringify(mismatch))
+  })
+
+  eventStream.onClosed(async () => {
+    unsub()
+    await eventStream.close()
+  })
+
+  return eventStream.send()
+})
diff --git a/src/runtime/hydration/types.ts b/src/runtime/hydration/types.ts
new file mode 100644
index 0000000..648d919
--- /dev/null
+++ b/src/runtime/hydration/types.ts
@@ -0,0 +1,19 @@
+import type { ComponentInternalInstance, VNode } from 'vue'
+
+export interface HydrationMismatchPayload {
+  id: string
+  componentName?: string
+  fileLocation: string
+  htmlPreHydration: string
+  htmlPostHydration: string
+}
+
+export interface LocalHydrationMismatch extends HydrationMismatchPayload {
+  instance: ComponentInternalInstance
+  vnode: VNode
+}
+
+// prefer interface for extensibility
+export interface HydrationMismatchResponse {
+  mismatches: HydrationMismatchPayload[]
+}
diff --git a/src/runtime/hydration/utils.ts b/src/runtime/hydration/utils.ts
new file mode 100644
index 0000000..eb6d8a0
--- /dev/null
+++ b/src/runtime/hydration/utils.ts
@@ -0,0 +1,32 @@
+export const HYDRATION_ROUTE = '/__nuxt_hydration'
+export const HYDRATION_SSE_ROUTE = '/__nuxt_hydration/sse'
+
+export function formatHTML(html: string | undefined): string {
+  if (!html) return ''
+
+  // Simple HTML formatting function
+  let formatted = ''
+  let indent = 0
+  const tags = html.split(/(<\/?[^>]+>)/g)
+
+  for (const tag of tags) {
+    if (!tag.trim()) continue
+
+    if (tag.startsWith('</')) {
+      indent--
+      formatted += '\n' + '  '.repeat(Math.max(0, indent)) + tag
+    }
+    else if (tag.startsWith('<') && !tag.endsWith('/>') && !tag.includes('<!')) {
+      formatted += '\n' + '  '.repeat(Math.max(0, indent)) + tag
+      indent++
+    }
+    else if (tag.startsWith('<')) {
+      formatted += '\n' + '  '.repeat(Math.max(0, indent)) + tag
+    }
+    else {
+      formatted += '\n' + '  '.repeat(Math.max(0, indent)) + tag.trim()
+    }
+  }
+
+  return formatted.trim()
+}
diff --git a/src/runtime/types.d.ts b/src/runtime/types.d.ts
index b31d641..685da84 100644
--- a/src/runtime/types.d.ts
+++ b/src/runtime/types.d.ts
@@ -1,5 +1,6 @@
-import type { ComponentInternalInstance, VNode, Ref } from 'vue'
+import type { VNode, Ref } from 'vue'
 import type { LCPMetricWithAttribution, INPMetricWithAttribution, CLSMetricWithAttribution } from 'web-vitals/attribution'
+import type { HydrationMismatchPayload, LocalHydrationMismatch } from './hydration/types'
 
 declare global {
   interface Window {
@@ -19,6 +20,7 @@ declare global {
     __vnode?: VNode
   }
 }
+
 declare module '#app' {
   interface RuntimeNuxtHooks {
     'hints:scripts:added': (script: HTMLScriptElement) => void
@@ -33,7 +35,7 @@ declare module '#app' {
   interface NuxtApp {
     __hints_tpc: Ref<{ element: HTMLScriptElement, loaded: boolean }[]>
     __hints: {
-      hydration: { instance: ComponentInternalInstance, vnode: VNode, htmlPreHydration: string | undefined, htmlPostHydration: string | undefined }[]
+      hydration: LocalHydrationMismatch[]
       webvitals: {
         lcp: Ref<LCPMetricWithAttribution[]>
         inp: Ref<INPMetricWithAttribution[]>
@@ -45,4 +47,10 @@ declare module '#app' {
   }
 }
 
+declare module 'nitropack' {
+  interface NitroRuntimeHooks {
+    'hints:hydration:mismatch': (payload: HydrationMismatchPayload) => void
+  }
+}
+
 export {}

From 3c5740fc93fe0d8a27b489480ea55c94a37b8606 Mon Sep 17 00:00:00 2001
From: Julien Huang <julien.h.dev@gmail.com>
Date: Sun, 23 Nov 2025 23:23:41 +0100
Subject: [PATCH 02/12] add missing import

---
 client/app/plugins/hydration.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/client/app/plugins/hydration.ts b/client/app/plugins/hydration.ts
index 48716a0..d533e9e 100644
--- a/client/app/plugins/hydration.ts
+++ b/client/app/plugins/hydration.ts
@@ -1,4 +1,5 @@
 import type { HydrationMismatchPayload, HydrationMismatchResponse, LocalHydrationMismatch } from '../../../src/runtime/hydration/types'
+import { defineNuxtPlugin, useHostNuxt, ref } from '#imports'
 
 export default defineNuxtPlugin(() => {
   const host = useHostNuxt()

From a90df11c772727e59819cd9ebc51ae43b0c93f8b Mon Sep 17 00:00:00 2001
From: Julien Huang <julien.h.dev@gmail.com>
Date: Sun, 23 Nov 2025 23:29:00 +0100
Subject: [PATCH 03/12] cleaning

---
 src/runtime/hydration/handler.nitro.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/runtime/hydration/handler.nitro.ts b/src/runtime/hydration/handler.nitro.ts
index d7107b1..b0e877a 100644
--- a/src/runtime/hydration/handler.nitro.ts
+++ b/src/runtime/hydration/handler.nitro.ts
@@ -29,7 +29,6 @@ async function postHandler(event: H3Event) {
   const nitro = useNitroApp()
   const payload = { id: body.id, htmlPreHydration: body.htmlPreHydration, htmlPostHydration: body.htmlPostHydration, componentName: body.componentName, fileLocation: body.fileLocation }
   hydrationMistmatches.push(payload)
-  console.log('Received hydration mismatch:', hydrationMistmatches.length)
   nitro.hooks.callHook('hints:hydration:mismatch', payload)
   setResponseStatus(event, 201)
 }

From 9966e2fb9a4ba4270c30075f98c8a9b1278e2fc7 Mon Sep 17 00:00:00 2001
From: Julien Huang <julien.h.dev@gmail.com>
Date: Sun, 23 Nov 2025 23:29:57 +0100
Subject: [PATCH 04/12] fix: max 20 mismatches

---
 src/runtime/hydration/handler.nitro.ts | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/runtime/hydration/handler.nitro.ts b/src/runtime/hydration/handler.nitro.ts
index b0e877a..892aa89 100644
--- a/src/runtime/hydration/handler.nitro.ts
+++ b/src/runtime/hydration/handler.nitro.ts
@@ -29,6 +29,9 @@ async function postHandler(event: H3Event) {
   const nitro = useNitroApp()
   const payload = { id: body.id, htmlPreHydration: body.htmlPreHydration, htmlPostHydration: body.htmlPostHydration, componentName: body.componentName, fileLocation: body.fileLocation }
   hydrationMistmatches.push(payload)
+  if (hydrationMistmatches.length > 20) {
+    hydrationMistmatches.shift()
+  }
   nitro.hooks.callHook('hints:hydration:mismatch', payload)
   setResponseStatus(event, 201)
 }

From 8e961c175dc58df90d49de328b0bed07a840eb28 Mon Sep 17 00:00:00 2001
From: Julien Huang <julien.h.dev@gmail.com>
Date: Sun, 23 Nov 2025 23:36:52 +0100
Subject: [PATCH 05/12] fixes

---
 client/app/plugins/hydration.ts | 4 +++-
 client/tsconfig.json            | 5 +----
 2 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/client/app/plugins/hydration.ts b/client/app/plugins/hydration.ts
index d533e9e..d060d5c 100644
--- a/client/app/plugins/hydration.ts
+++ b/client/app/plugins/hydration.ts
@@ -15,7 +15,9 @@ export default defineNuxtPlugin(() => {
   const eventSource = new EventSource(new URL('/__nuxt_hydration/sse', window.location.origin).href)
   eventSource.addEventListener('message', (event) => {
     const mismatch: HydrationMismatchPayload = JSON.parse(event.data)
-    hydrationMismatches.value.push(mismatch)
+    if (!hydrationMismatches.value.some(existing => existing.id === mismatch.id)) {
+      hydrationMismatches.value.push(mismatch)
+    }
   })
 
   return {
diff --git a/client/tsconfig.json b/client/tsconfig.json
index 735767f..cb3b1e5 100644
--- a/client/tsconfig.json
+++ b/client/tsconfig.json
@@ -1,6 +1,3 @@
 {
-    "extends": "./.nuxt/tsconfig.json",
-    "includes": [
-        "../types.d.ts"
-    ]
+    "extends": "./.nuxt/tsconfig.json"
 }
\ No newline at end of file

From 6632e81eab3c1a7b0496d686871d7385359813ce Mon Sep 17 00:00:00 2001
From: Julien Huang <julien.h.dev@gmail.com>
Date: Sun, 23 Nov 2025 23:42:02 +0100
Subject: [PATCH 06/12] fix: tsconfigs

---
 client/tsconfig.json |  8 +++++++-
 tsconfig.json        | 15 ++++++++++-----
 2 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/client/tsconfig.json b/client/tsconfig.json
index cb3b1e5..5086b81 100644
--- a/client/tsconfig.json
+++ b/client/tsconfig.json
@@ -1,3 +1,9 @@
 {
-    "extends": "./.nuxt/tsconfig.json"
+  "files": [],
+  "references": [
+    { "path": "./.nuxt/tsconfig.app.json" },
+    { "path": "./.nuxt/tsconfig.server.json" },
+    { "path": "./.nuxt/tsconfig.shared.json" },
+    { "path": "./.nuxt/tsconfig.node.json" }
+  ]
 }
\ No newline at end of file
diff --git a/tsconfig.json b/tsconfig.json
index 9683639..c26d3cf 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,6 +1,11 @@
 {
-  "extends": ["./.nuxt/tsconfig.json", "./playground/.nuxt/tsconfig.json"],
-  "includes": [
-    "./types.d.ts"
-  ],
-}
+  // Remove "extends": "./.nuxt/tsconfig.json" if present
+  "files": [],
+  "references": [
+    { "path": "./.nuxt/tsconfig.app.json" },
+    { "path": "./.nuxt/tsconfig.server.json" },
+    { "path": "./.nuxt/tsconfig.shared.json" },
+    { "path": "./.nuxt/tsconfig.node.json" },
+    { "path": "./playground/.nuxt/tsconfig.json" }
+  ]
+}
\ No newline at end of file

From 9b03f1f054ef52ce32bcd947ec3082d806663aad Mon Sep 17 00:00:00 2001
From: Julien Huang <julien.h.dev@gmail.com>
Date: Mon, 24 Nov 2025 20:01:24 +0100
Subject: [PATCH 07/12] use href

---
 src/runtime/hydration/composables.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/runtime/hydration/composables.ts b/src/runtime/hydration/composables.ts
index 27f3bbd..bdc75ed 100644
--- a/src/runtime/hydration/composables.ts
+++ b/src/runtime/hydration/composables.ts
@@ -36,7 +36,7 @@ export function useHydrationCheck() {
         instance,
         vnode: vnodePrehydration,
       })
-      $fetch(new URL(HYDRATION_ROUTE, window.location.origin), {
+      $fetch(new URL(HYDRATION_ROUTE, window.location.origin).href, {
         method: 'POST',
         body: payload,
       })

From 9a1a7d09b52ea9dfc1ed49dd6344861a7b074b16 Mon Sep 17 00:00:00 2001
From: Julien Huang <julien.h.dev@gmail.com>
Date: Wed, 26 Nov 2025 22:52:35 +0100
Subject: [PATCH 08/12] Update src/runtime/hydration/handler.nitro.ts

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
---
 src/runtime/hydration/handler.nitro.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/runtime/hydration/handler.nitro.ts b/src/runtime/hydration/handler.nitro.ts
index 892aa89..307a2a7 100644
--- a/src/runtime/hydration/handler.nitro.ts
+++ b/src/runtime/hydration/handler.nitro.ts
@@ -43,6 +43,8 @@ function assertPayload(body: any): asserts body is HydrationMismatchPayload {
     || typeof body.id !== 'string'
     || (body.htmlPreHydration !== undefined && typeof body.htmlPreHydration !== 'string')
     || (body.htmlPostHydration !== undefined && typeof body.htmlPostHydration !== 'string')
+    || typeof body.componentName !== 'string'
+    || typeof body.fileLocation !== 'string'
   ) {
     throw createError({ statusCode: 400, statusMessage: 'Invalid payload' })
   }

From 2dd433c962882268fe4ec068fb86ec791259a367 Mon Sep 17 00:00:00 2001
From: Julien Huang <julien.h.dev@gmail.com>
Date: Fri, 28 Nov 2025 21:19:50 +0100
Subject: [PATCH 09/12] feat: refactor and add delete

---
 client/app/components/HydrationIssue.vue | 24 ++++++++++++++++-
 client/app/plugins/hydration.ts          |  6 ++++-
 src/runtime/hydration/handler.nitro.ts   | 33 ++++++++++++++++++------
 src/runtime/hydration/sse.nitro.ts       | 16 +++++++++---
 src/runtime/hydration/types.ts           | 18 +++++++++++++
 src/runtime/types.d.ts                   |  1 +
 6 files changed, 84 insertions(+), 14 deletions(-)

diff --git a/client/app/components/HydrationIssue.vue b/client/app/components/HydrationIssue.vue
index fb3e4d3..20d6867 100644
--- a/client/app/components/HydrationIssue.vue
+++ b/client/app/components/HydrationIssue.vue
@@ -3,6 +3,7 @@ import { codeToHtml } from 'shiki/bundle/web'
 import { diffLines, type ChangeObject } from 'diff'
 import { transformerNotationDiff } from '@shikijs/transformers'
 import type { HydrationMismatchPayload, LocalHydrationMismatch } from '../../../src/runtime/hydration/types'
+import { HYDRATION_ROUTE } from '../../../src/runtime/hydration/utils'
 
 const props = defineProps<{
   issue: Issue
@@ -62,6 +63,16 @@ watch([fullPre, fullPost], ([newPre, newPost]) => {
 function copy(text: string) {
   navigator.clipboard?.writeText(text).catch(() => { })
 }
+
+function removeSelf() {
+  fetch(HYDRATION_ROUTE, {
+    method: 'DELETE',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify({ id: [props.issue.id] }),
+  })
+}
 </script>
 
 <template>
@@ -78,7 +89,7 @@ function copy(text: string) {
           {{ filePath }}
         </div>
       </div>
-      <div class="shrink-0 flex items-center gap-2">
+      <div class="flex gap-2">
         <n-button
           v-if="element"
           size="small"
@@ -115,6 +126,17 @@ function copy(text: string) {
           />
           <span class="ml-1">Copy post</span>
         </n-button>
+        <n-button
+          title="Remove"
+          size="small"
+          quaternary
+          @click="removeSelf"
+        >
+          <Icon
+            name="material-symbols:delete-outline"
+            class="text-lg"
+          />
+        </n-button>
       </div>
     </div>
 
diff --git a/client/app/plugins/hydration.ts b/client/app/plugins/hydration.ts
index d060d5c..ddebe5f 100644
--- a/client/app/plugins/hydration.ts
+++ b/client/app/plugins/hydration.ts
@@ -13,12 +13,16 @@ export default defineNuxtPlugin(() => {
   })
 
   const eventSource = new EventSource(new URL('/__nuxt_hydration/sse', window.location.origin).href)
-  eventSource.addEventListener('message', (event) => {
+  eventSource.addEventListener('hints:hydration:mismatch', (event) => {
     const mismatch: HydrationMismatchPayload = JSON.parse(event.data)
     if (!hydrationMismatches.value.some(existing => existing.id === mismatch.id)) {
       hydrationMismatches.value.push(mismatch)
     }
   })
+  eventSource.addEventListener('hints:hydration:cleared', (event) => {
+    const clearedIds: string[] = JSON.parse(event.data)
+    hydrationMismatches.value = hydrationMismatches.value.filter(m => !clearedIds.includes(m.id))
+  })
 
   return {
     provide: {
diff --git a/src/runtime/hydration/handler.nitro.ts b/src/runtime/hydration/handler.nitro.ts
index 892aa89..8732dcc 100644
--- a/src/runtime/hydration/handler.nitro.ts
+++ b/src/runtime/hydration/handler.nitro.ts
@@ -6,15 +6,16 @@ import { useNitroApp } from 'nitropack/runtime'
 const hydrationMistmatches: HydrationMismatchPayload[] = []
 
 export default defineEventHandler((event) => {
-  if (event.method === 'GET') {
-    console.log('called')
-    return getHandler()
+  switch (event.method) {
+    case 'GET':
+      return getHandler()
+    case 'POST':
+      return postHandler(event)
+    case 'DELETE':
+      return deleteHandler(event)
+    default:
+      throw createError({ statusCode: 405, statusMessage: 'Method Not Allowed' })
   }
-  else if (event.method === 'POST') {
-    return postHandler(event)
-  }
-
-  throw createError({ statusCode: 405, statusMessage: 'Method Not Allowed' })
 })
 
 function getHandler() {
@@ -36,6 +37,22 @@ async function postHandler(event: H3Event) {
   setResponseStatus(event, 201)
 }
 
+async function deleteHandler(event: H3Event) {
+  const nitro = useNitroApp()
+  const body = await readBody<{ id: string[] }>(event)
+  if (!body || !Array.isArray(body.id)) {
+    throw createError({ statusCode: 400, statusMessage: 'Invalid payload' })
+  }
+  for (const id of body.id) {
+    const index = hydrationMistmatches.findIndex(m => m.id === id)
+    if (index !== -1) {
+      hydrationMistmatches.splice(index, 1)
+    }
+  }
+  nitro.hooks.callHook('hints:hydration:cleared', { id: body.id })
+  setResponseStatus(event, 204)
+}
+
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 function assertPayload(body: any): asserts body is HydrationMismatchPayload {
   if (
diff --git a/src/runtime/hydration/sse.nitro.ts b/src/runtime/hydration/sse.nitro.ts
index fbde850..bd666d2 100644
--- a/src/runtime/hydration/sse.nitro.ts
+++ b/src/runtime/hydration/sse.nitro.ts
@@ -5,12 +5,20 @@ export default defineEventHandler((event) => {
   const nitro = useNitroApp()
   const eventStream = createEventStream(event)
 
-  const unsub = nitro.hooks.hook('hints:hydration:mismatch', (mismatch) => {
-    eventStream.push(JSON.stringify(mismatch))
-  })
+  const unsubs = [nitro.hooks.hook('hints:hydration:mismatch', (mismatch) => {
+    eventStream.push({
+      data: JSON.stringify(mismatch),
+      event: 'hints:hydration:mismatch',
+    })
+  }), nitro.hooks.hook('hints:hydration:cleared', async (payload) => {
+    eventStream.push({
+      data: JSON.stringify(payload.id),
+      event: 'hints:hydration:cleared',
+    })
+  })]
 
   eventStream.onClosed(async () => {
-    unsub()
+    unsubs.forEach(unsub => unsub())
     await eventStream.close()
   })
 
diff --git a/src/runtime/hydration/types.ts b/src/runtime/hydration/types.ts
index 648d919..a422268 100644
--- a/src/runtime/hydration/types.ts
+++ b/src/runtime/hydration/types.ts
@@ -1,3 +1,4 @@
+import type { EventStreamMessage } from 'h3'
 import type { ComponentInternalInstance, VNode } from 'vue'
 
 export interface HydrationMismatchPayload {
@@ -17,3 +18,20 @@ export interface LocalHydrationMismatch extends HydrationMismatchPayload {
 export interface HydrationMismatchResponse {
   mismatches: HydrationMismatchPayload[]
 }
+
+export interface HydrationDeleteSSE extends EventStreamMessage {
+  event: 'hydration:cleared'
+  // array of ids
+  data: string
+}
+
+export interface HydrationNewSSE extends EventStreamMessage {
+  event: 'hydration:mismatch'
+  /**
+   * Stringified HydrationMismatchPayload
+   * @see HydrationMismatchPayload
+   */
+  data: string
+}
+
+export type HydrationSSEPayload = HydrationDeleteSSE | HydrationNewSSE
diff --git a/src/runtime/types.d.ts b/src/runtime/types.d.ts
index 685da84..a57ccfd 100644
--- a/src/runtime/types.d.ts
+++ b/src/runtime/types.d.ts
@@ -50,6 +50,7 @@ declare module '#app' {
 declare module 'nitropack' {
   interface NitroRuntimeHooks {
     'hints:hydration:mismatch': (payload: HydrationMismatchPayload) => void
+    'hints:hydration:cleared': (payload: { id: string[] }) => void
   }
 }
 

From d52b62596f150184ffbe4934033e72cd367ee262 Mon Sep 17 00:00:00 2001
From: Julien Huang <julien.h.dev@gmail.com>
Date: Fri, 28 Nov 2025 23:10:01 +0100
Subject: [PATCH 10/12] refactor: use variables

---
 client/app/plugins/hydration.ts | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/client/app/plugins/hydration.ts b/client/app/plugins/hydration.ts
index ddebe5f..524c3d0 100644
--- a/client/app/plugins/hydration.ts
+++ b/client/app/plugins/hydration.ts
@@ -1,5 +1,6 @@
 import type { HydrationMismatchPayload, HydrationMismatchResponse, LocalHydrationMismatch } from '../../../src/runtime/hydration/types'
 import { defineNuxtPlugin, useHostNuxt, ref } from '#imports'
+import { HYDRATION_ROUTE, HYDRATION_SSE_ROUTE } from '../../../src/runtime/hydration/utils'
 
 export default defineNuxtPlugin(() => {
   const host = useHostNuxt()
@@ -8,11 +9,11 @@ export default defineNuxtPlugin(() => {
 
   hydrationMismatches.value = [...host.__hints.hydration]
 
-  $fetch<HydrationMismatchResponse>(new URL('/__nuxt_hydration', window.location.origin).href).then((data: { mismatches: HydrationMismatchPayload[] }) => {
+  $fetch<HydrationMismatchResponse>(new URL(HYDRATION_ROUTE, window.location.origin).href).then((data: { mismatches: HydrationMismatchPayload[] }) => {
     hydrationMismatches.value = [...hydrationMismatches.value, ...data.mismatches.filter(m => !hydrationMismatches.value.some(existing => existing.id === m.id))]
   })
 
-  const eventSource = new EventSource(new URL('/__nuxt_hydration/sse', window.location.origin).href)
+  const eventSource = new EventSource(new URL(HYDRATION_SSE_ROUTE, window.location.origin).href)
   eventSource.addEventListener('hints:hydration:mismatch', (event) => {
     const mismatch: HydrationMismatchPayload = JSON.parse(event.data)
     if (!hydrationMismatches.value.some(existing => existing.id === mismatch.id)) {

From d43ec650eb68a1752e01657c5fd6a09058f9332b Mon Sep 17 00:00:00 2001
From: Julien Huang <julien.h.dev@gmail.com>
Date: Fri, 28 Nov 2025 23:14:48 +0100
Subject: [PATCH 11/12] fix: filepath

---
 client/app/components/HydrationIssue.vue | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/client/app/components/HydrationIssue.vue b/client/app/components/HydrationIssue.vue
index 20d6867..ebd340f 100644
--- a/client/app/components/HydrationIssue.vue
+++ b/client/app/components/HydrationIssue.vue
@@ -17,10 +17,7 @@ const isLocalIssue = (issue: HydrationMismatchPayload | LocalHydrationMismatch):
 
 const componentName = computed(() => props.issue.componentName ?? 'Unknown component')
 const filePath = computed(() => isLocalIssue(props.issue)
-  ? (props.issue.instance.type as MaybeNamed).name
-  ?? (props.issue.instance.type as MaybeNamed).__name
-  ?? (props.issue.instance.type as MaybeNamed).__file
-  ?? 'Unknown component'
+  ? (props.issue.instance.type as MaybeNamed).__file
   : (props.issue as HydrationMismatchPayload).fileLocation,
 )
 

From 59255a9efc079eae69696c5e0ec3fea1a6426ff5 Mon Sep 17 00:00:00 2001
From: Julien Huang <julien.h.dev@gmail.com>
Date: Fri, 28 Nov 2025 23:18:57 +0100
Subject: [PATCH 12/12] fix: var name

---
 src/runtime/hydration/handler.nitro.ts | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/runtime/hydration/handler.nitro.ts b/src/runtime/hydration/handler.nitro.ts
index cdb723d..f43c9cb 100644
--- a/src/runtime/hydration/handler.nitro.ts
+++ b/src/runtime/hydration/handler.nitro.ts
@@ -3,7 +3,7 @@ import { createError, defineEventHandler, readBody, setResponseStatus } from 'h3
 import type { HydrationMismatchPayload } from './types'
 import { useNitroApp } from 'nitropack/runtime'
 
-const hydrationMistmatches: HydrationMismatchPayload[] = []
+const hydrationMismatches: HydrationMismatchPayload[] = []
 
 export default defineEventHandler((event) => {
   switch (event.method) {
@@ -20,7 +20,7 @@ export default defineEventHandler((event) => {
 
 function getHandler() {
   return {
-    mismatches: hydrationMistmatches,
+    mismatches: hydrationMismatches,
   }
 }
 
@@ -29,9 +29,9 @@ async function postHandler(event: H3Event) {
   assertPayload(body)
   const nitro = useNitroApp()
   const payload = { id: body.id, htmlPreHydration: body.htmlPreHydration, htmlPostHydration: body.htmlPostHydration, componentName: body.componentName, fileLocation: body.fileLocation }
-  hydrationMistmatches.push(payload)
-  if (hydrationMistmatches.length > 20) {
-    hydrationMistmatches.shift()
+  hydrationMismatches.push(payload)
+  if (hydrationMismatches.length > 20) {
+    hydrationMismatches.shift()
   }
   nitro.hooks.callHook('hints:hydration:mismatch', payload)
   setResponseStatus(event, 201)
@@ -44,9 +44,9 @@ async function deleteHandler(event: H3Event) {
     throw createError({ statusCode: 400, statusMessage: 'Invalid payload' })
   }
   for (const id of body.id) {
-    const index = hydrationMistmatches.findIndex(m => m.id === id)
+    const index = hydrationMismatches.findIndex(m => m.id === id)
     if (index !== -1) {
-      hydrationMistmatches.splice(index, 1)
+      hydrationMismatches.splice(index, 1)
     }
   }
   nitro.hooks.callHook('hints:hydration:cleared', { id: body.id })