feat: hydration issues across tabs and reloads

[huang-julien]

🔗 Linked issue

resolves #124

❓ Type of change

• 📖 Documentation (updates to the documentation or readme)
• 🐞 Bug fix (a non-breaking change that fixes an issue)
• 👌 Enhancement (improving an existing functionality)
• ✨ New feature (a non-breaking change that adds functionality)
• 🧹 Chore (updates to the build process or auxiliary tools and libraries)
• ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

This PR adds hydration issues across tabs and reloads using a nitro handler + sse to synchronize multiple devtools if there is.

[pkg-pr-new]

Open in StackBlitz

npm i https://pkg.pr.new/nuxt/hints/@nuxt/hints@149

commit: 5ffade5

[Copilot]

Pull request overview

This PR implements real-time synchronization of hydration mismatch detection across multiple browser tabs and page reloads using Server-Sent Events (SSE) and Nitro handlers. The feature allows developers to track and debug hydration issues that occur in their Nuxt applications across different instances.

Key Changes:

• Introduced a Nitro-based backend with HTTP POST/GET endpoints and SSE streaming to collect and broadcast hydration mismatches
• Refactored hydration tracking to separate local and remote mismatches with proper Typeing
• Added real-time synchronization via EventSource to update devtools across multiple tabs

Reviewed changes

Copilot reviewed 12 out of 14 changed files in this pull request and generated 13 comments.

Show a summary per file

File	Description
src/runtime/types.d.ts	Updated type definitions to use new LocalHydrationMismatch type and added Nitro runtime hooks
src/runtime/hydration/types.ts	Defined new interfaces for hydration mismatch payloads and responses
src/runtime/hydration/utils.ts	Extracted shared utility constants and HTML formatting function
src/runtime/hydration/sse.nitro.ts	Implemented SSE endpoint for real-time hydration mismatch broadcasting
src/runtime/hydration/handler.nitro.ts	Created HTTP handler for storing and retrieving hydration mismatches
src/runtime/hydration/composables.ts	Updated composable to POST mismatches to the server and refactored to use shared utilities
src/module.ts	Registered new server handlers and enabled experimental WebSocket support
client/app/plugins/hydration.ts	Added plugin to fetch and listen for hydration mismatches via REST and SSE
client/app/pages/index.vue	Updated to use new hydration mismatches reactive ref
client/app/pages/hydration.vue	Updated to use new hydration mismatches reactive ref
client/app/composables/host.ts	Exported useHostNuxt function for use in the new plugin
client/app/components/HydrationIssue.vue	Refactored to support both local and remote hydration mismatches with generic typing
package.json	Added self-reference workspace dependency
pnpm-lock.yaml	Updated lockfile with workspace dependency

Files not reviewed (1)

• pnpm-lock.yaml: Language not supported

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.