Hydration warning when using Custom Component inside <Teleport> within <ClientOnly>

[zabefofoon]

Environment

Hi there! First of all, thank you for creating such a great module. I've been integrating nuxt/hints into my Nuxt project and found it very useful.

However, I encountered a hydration mismatch warning when placing a custom component inside a , even though the entire block is wrapped in .

Since ensures that the content is rendered only on the client side, I believe this should not cause any hydration issues. It seems like nuxt/hints might be flagging this as a false positive.

Reproduction

https://stackblitz.com/edit/nuxt-starter-naqxso5h?file=layouts%2Fdefault.vue,pages%2Findex.vue

Describe the bug

hints:warn [hydration] Component /home/projects/nuxt-starter-naqxso5h/components/TeleportItem.vue seems to have different html pre and post-hydration. Please make sure you don't have any hydration issue.

Expected Behavior No hydration warning should appear since the component is wrapped in .

[coderabbitai]

🔗 Related PRs

#200 - fix: don't run hydration check if page is not server rendered [merged]
#212 - feat: initial component lazy load hints [merged]

---

📝 Issue Planner

_{Check the box below or use the @coderabbitai plan command to generate an implementation plan and prompts that you can use with your favorite coding assistant.}

• Create Plan

---

🧪 Issue enrichment is currently in open beta.

You can configure auto-planning by selecting labels in the issue_enrichment configuration.

To disable automatic issue enrichment, add the following to your .coderabbit.yaml:

issue_enrichment:
  auto_enrich:
    enabled: false

💬 Have feedback or questions? Drop into our discord!

[huang-julien]

Thank you for you kind words ! That's indeed a bug, I'll work on it when possible.