Dropdown component causes a hydration bug

[ahmedragab20]

Environment

{
 "@nuxt/ui": "^2.12.0",
 "nuxt": "^3.9.1",
 "vue": "^3.4.13"
}

Version

v2.12.0

Reproduction

if you check the warning below, you'll see that the core of the issue is id=​"headlessui-menu-button-5", whenever I reload the page the 5 number will increment to 6, for example, the issue now is the id=​"headlessui-menu-button-5", when I reload the page it'll become id=​"headlessui-menu-button-6"

  - rendered on server: id="headlessui-menu-button-5"
  - expected on client: id="headlessui-menu-button-1"
  Note: this mismatch is check-only. The DOM will not be rectified in production due to performance overhead.
  You should fix the source of the mismatch. 
  at <MenuButton ref="trigger" as="div" disabled=false  ... > 
  at <Menu as="div" class="relative inline-flex text-left rtl:text-right" onMouseleave=fn<onMouseLeave> > 
  at <Dropdown items= (4) [Array(1), Array(2), Array(2), Array(1)] popper= {placement: 'bottom-start'} > 
  at <Container> 
  at <Default ref=Ref< undefined > > 
  at <LayoutLoader key="default" layoutProps= {ref: RefImpl} name="default" > 
  at <NuxtLayoutProvider layoutProps= {ref: RefImpl} key="default" name="default"  ... > 
  at <NuxtLayout> 
  at <App key=3 > 
  at <NuxtRoot>

Description

before reloading the page:

after reloading the page:

Additional context

My code:

<UDropdown :items="menuItems" :popper="{ placement: 'bottom-start' }">
  <button
    class="duration-200 select-none border border-slate-100 flex items-center rounded-lg gap-2 px-3 py-1 hover:bg-slate-100 active:bg-slate-200"
    >
      <IconProfile class="w-5 h-5 text-primary-800" />
      <strong class="text-lg font-extrabold font-archivo max-w-xs truncate">
        Admin
      </strong>
   </button>
</UDropdown>

Logs

No response

[benjamincanac]

Duplicate #1171. You have to set the resolution to vue 3.3.13 while we wait for the new useId composable coming in Vue 3.5.