fix: skip hydration check if client only component

[huang-julien]

🔗 Linked issue

fix #217

❓ 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

Check for clientonly symbol; If true, we'll skip the hydration check

[pkg-pr-new]

Open in StackBlitz

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

commit: 9301019

[coderabbitai]

📝 Walkthrough

Walkthrough

This change modifies the hydration check composable to recognize components wrapped in <ClientOnly> and skip hydration validation for them. The implementation adds an import for the client-only symbol from the component library and introduces a runtime check using Vue's inject API. When the isClientOnly flag is active, hydration checks are bypassed alongside the existing server-side condition. The function signature remains unchanged.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and concisely describes the main change: skipping hydration checks for client-only components.
Description check	✅ Passed	The description references issue #217 and explains the fix checks for the ClientOnly symbol to skip hydration checks, which aligns with the changeset.
Linked Issues check	✅ Passed	The PR implementation detects and injects the ClientOnly symbol, then skips hydration checks when the flag is active, directly addressing issue #217's requirement to avoid false-positive hydration warnings for client-only components.
Out of Scope Changes check	✅ Passed	All changes are scoped to the hydration check logic in composables.ts and directly support the objective of skipping hydration validation for client-only components.
Docstring Coverage	✅ Passed	Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch fix/client-only-hydration

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

🧹 Nitpick comments (1)

src/runtime/hydration/composables.ts (1)

12-16: Move the import.meta.server guard before the inject call.

inject(clientOnlySymbol, false) is called on line 12 before the server-side early return on line 14. Since import.meta.server resolves to true on the server build, the inject call executes but its result is discarded—adding unnecessary overhead. Reordering to check import.meta.server first avoids the lookup on the server path.

♻️ Proposed reorder

+  if (import.meta.server) {
+    return
+  }
+
   const isClientOnly = inject(clientOnlySymbol, false)

-  if (import.meta.server || isClientOnly) {
+  if (isClientOnly) {
     return
   }

Note: This code depends on clientOnlySymbol being provided by Nuxt's <ClientOnly> component in its setup. This is an internal Nuxt implementation detail, so be aware of potential fragility if Nuxt's internal structure changes.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/runtime/hydration/composables.ts` around lines 12 - 16, Move the
server-side guard to run before calling inject: check import.meta.server first
and return early if true, then call inject(clientOnlySymbol, false) and proceed
with the existing isClientOnly logic; this avoids invoking
inject(clientOnlySymbol, false) on the server where its result is discarded.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@src/runtime/hydration/composables.ts`:
- Around line 12-16: Move the server-side guard to run before calling inject:
check import.meta.server first and return early if true, then call
inject(clientOnlySymbol, false) and proceed with the existing isClientOnly
logic; this avoids invoking inject(clientOnlySymbol, false) on the server where
its result is discarded.