Hydration children mismatch error when using Dialog component

[christophheich]

What package within Headless UI are you using?

@headlessui/vue

What version of that package are you using?

"@headlessui/vue": "^1.6.2", "nuxt": "3.0.0-rc.3"

What browser are you using?

Chrome, Firefox

Reproduction URL

https://github.com/ljnsn/nuxt3-headlessui-hydration-bug

Describe your issue

When using the Dialog component the following warning/error is shown:

[Vue warn]: Hydration children mismatch in <div>: server rendered element contains fewer child nodes than client vdom. 
  at <Portal> 
  at <ForcePortalRoot force=true > 
  at <Dialog as="div" onClose=fn<close> open=false > 
  at <Modal open=false onClose=fn > 
  at <Index onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > key="/" > 
  at <BaseTransition mode="out-in" appear=false persisted=false  ... > 
  at <Transition name="page" mode="out-in" > 
  at <RouterView > 
  at <NuxtPage> 
  at <Anonymous > 
  at <Anonymous > 
  at <Anonymous> 
  at <App key=1 > 
  at <NuxtRoot>

Wrapping Dialog in ClientOnly resolves this issue.

As @alehano stated, it might be related to this discussion/issue: https://github.com/nuxt/nuxt.js/discussions/10232

Some more informations regarding the same issue: https://github.com/tailwindlabs/headlessui/issues/1485