Disclosure component hydration missmatch

[gkkirilov]

Wrapping it in ClientOnly fixes it but will be better if the generated id matches and the component is rendered server side.

<Disclosure v-slot="{ open }">
    <DisclosureButton
      class="row text-center w-full flex items-center m-0 py-2"
    >
    Button
      <div class="col-md-1 justify-end flex">
        <ChevronUpIcon
          :class="!open ? 'rotate-180 transform' : ''"
          class="h-7 w-7 text-sky-800 self-center flex"
        />
      </div>
    </DisclosureButton>
      <DisclosurePanel
        class="text-gray-500 py-2 text-center"
      >
      Expanded content
      </DisclosurePanel>
  </Disclosure>
  

[P4sca1]

This is an upstream issue. Please see tailwindlabs/headlessui#2913.

[vanling]

@P4sca1 tailwindlabs/headlessui#2913 (comment) could this fix by @reinink work?

<!-- app.vue -->

<template>
  <Switch>
    <!-- .... -->
  </Switch>
</template>

<script setup>
import { Switch, provideUseId } from '@headlessui/vue'

provideUseId(() => useId())
</script>

edit: sorry, nevermind., just now saw your comment there.