fix(components): hydration attribute mismatch with vue 3.4 (#1199)

src/runtime/components/data/Table.vue

@@ -4,7 +4,7 @@
       <thead :class="ui.thead">
         <tr :class="ui.tr.base">
           <th v-if="modelValue" scope="col" :class="ui.checkbox.padding">
-            <UCheckbox :checked="indeterminate || selected.length === rows.length" :indeterminate="indeterminate" aria-label="Select all" @change="onChange" />
+            <UCheckbox :model-value="indeterminate || selected.length === rows.length" :indeterminate="indeterminate" aria-label="Select all" @change="onChange" />
           </th>
 
           <th v-for="(column, index) in columns" :key="index" scope="col" :class="[ui.th.base, ui.th.padding, ui.th.color, ui.th.font, ui.th.size, column.class]">

src/runtime/components/elements/Accordion.vue

@@ -1,6 +1,6 @@
 <template>
   <div :class="ui.wrapper">
-    <HDisclosure v-for="(item, index) in items" v-slot="{ open, close }" :key="index" :default-open="defaultOpen || item.defaultOpen">
+    <HDisclosure v-for="(item, index) in items" v-slot="{ open, close }" :key="index" as="div" :default-open="defaultOpen || item.defaultOpen">
       <HDisclosureButton
         :ref="() => buttonRefs[index] = { open, close }"
         as="template"
@@ -47,7 +47,7 @@
 <script lang="ts">
 import { ref, computed, toRef, defineComponent } from 'vue'
 import type { PropType } from 'vue'
-import { Disclosure as HDisclosure, DisclosureButton as HDisclosureButton, DisclosurePanel as HDisclosurePanel } from '@headlessui/vue'
+import { Disclosure as HDisclosure, DisclosureButton as HDisclosureButton, DisclosurePanel as HDisclosurePanel, provideUseId } from '@headlessui/vue'
 import UIcon from '../elements/Icon.vue'
 import UButton from '../elements/Button.vue'
 import { useUI } from '../../composables/useUI'
@@ -56,6 +56,7 @@ import type { AccordionItem, Strategy } from '../../types'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { accordion, button } from '#ui/ui.config'
+import { useId } from '#imports'
 
 const config = mergeConfig<typeof accordion>(appConfig.ui.strategy, appConfig.ui.accordion, accordion)
 
@@ -146,6 +147,8 @@ export default defineComponent({
       el.addEventListener('transitionend', done, { once: true })
     }
 
+    provideUseId(() => useId())
+
     return {
       // eslint-disable-next-line vue/no-dupe-keys
       ui,

src/runtime/components/elements/Dropdown.vue

@@ -57,7 +57,7 @@
 <script lang="ts">
 import { defineComponent, ref, computed, watch, toRef, onMounted, resolveComponent } from 'vue'
 import type { PropType } from 'vue'
-import { Menu as HMenu, MenuButton as HMenuButton, MenuItems as HMenuItems, MenuItem as HMenuItem } from '@headlessui/vue'
+import { Menu as HMenu, MenuButton as HMenuButton, MenuItems as HMenuItems, MenuItem as HMenuItem, provideUseId } from '@headlessui/vue'
 import { defu } from 'defu'
 import { twMerge, twJoin } from 'tailwind-merge'
 import UIcon from '../elements/Icon.vue'
@@ -70,6 +70,7 @@ import type { DropdownItem, PopperOptions, Strategy } from '../../types'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { dropdown } from '#ui/ui.config'
+import { useId } from '#imports'
 
 const config = mergeConfig<typeof dropdown>(appConfig.ui.strategy, appConfig.ui.dropdown, dropdown)
 
@@ -251,6 +252,8 @@ export default defineComponent({
 
     const NuxtLink = resolveComponent('NuxtLink')
 
+    provideUseId(() => useId())
+
     return {
       // eslint-disable-next-line vue/no-dupe-keys
       ui,

src/runtime/components/forms/Checkbox.vue

@@ -8,7 +8,6 @@
         :required="required"
         :value="value"
         :disabled="disabled"
-        :checked="checked"
         :indeterminate="indeterminate"
         type="checkbox"
         :class="inputClass"
@@ -66,13 +65,9 @@ export default defineComponent({
       type: Boolean,
       default: false
     },
-    checked: {
-      type: Boolean,
-      default: false
-    },
     indeterminate: {
       type: Boolean,
-      default: false
+      default: undefined
     },
     help: {
       type: String,

src/runtime/components/forms/Form.vue

@@ -5,7 +5,6 @@
 </template>
 
 <script lang="ts">
-import { useId } from '#app'
 import { provide, ref, type PropType, defineComponent, onUnmounted, onMounted } from 'vue'
 import { useEventBus } from '@vueuse/core'
 import type { ZodSchema } from 'zod'
@@ -13,6 +12,7 @@ import type { ValidationError as JoiError, Schema as JoiSchema } from 'joi'
 import type { ObjectSchema as YupObjectSchema, ValidationError as YupError } from 'yup'
 import type { ObjectSchemaAsync as ValibotObjectSchema } from 'valibot'
 import type { FormError, FormEvent, FormEventType, FormSubmitEvent, FormErrorEvent, Form } from '../../types/form'
+import { useId } from '#imports'
 
 class FormException extends Error {
   constructor (message: string) {

src/runtime/components/forms/FormGroup.vue

@@ -38,7 +38,6 @@
 </template>
 
 <script lang="ts">
-import { useId } from '#app'
 import { computed, defineComponent, provide, inject, ref, toRef } from 'vue'
 import type { Ref, PropType } from 'vue'
 import { useUI } from '../../composables/useUI'
@@ -47,6 +46,7 @@ import type { FormError, InjectedFormGroupValue, FormGroupSize, Strategy } from
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { formGroup } from '#ui/ui.config'
+import { useId } from '#imports'
 
 const config = mergeConfig<typeof formGroup>(appConfig.ui.strategy, appConfig.ui.formGroup, formGroup)
 

src/runtime/components/forms/InputMenu.vue

@@ -98,7 +98,8 @@ import {
   ComboboxButton as HComboboxButton,
   ComboboxOptions as HComboboxOptions,
   ComboboxOption as HComboboxOption,
-  ComboboxInput as HComboboxInput
+  ComboboxInput as HComboboxInput,
+  provideUseId
 } from '@headlessui/vue'
 import { computedAsync, useDebounceFn } from '@vueuse/core'
 import { defu } from 'defu'
@@ -114,6 +115,7 @@ import type { InputSize, InputColor, InputVariant, PopperOptions, Strategy } fro
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { input, inputMenu } from '#ui/ui.config'
+import { useId } from '#imports'
 
 const config = mergeConfig<typeof input>(appConfig.ui.strategy, appConfig.ui.input, input)
 
@@ -275,7 +277,6 @@ export default defineComponent({
   emits: ['update:modelValue', 'update:query', 'open', 'close', 'change'],
   setup (props, { emit, slots }) {
     const { ui, attrs } = useUI('input', toRef(props, 'ui'), config, toRef(props, 'class'))
-
     const { ui: uiMenu } = useUI('inputMenu', toRef(props, 'uiMenu'), configMenu)
 
     const popper = computed<PopperOptions>(() => defu({}, props.popper, uiMenu.value.popper as PopperOptions))
@@ -428,6 +429,8 @@ export default defineComponent({
       query.value = event.target.value
     }
 
+    provideUseId(() => useId())
+
     return {
       // eslint-disable-next-line vue/no-dupe-keys
       ui,

src/runtime/components/forms/Radio.vue

@@ -26,18 +26,18 @@
 </template>
 
 <script lang="ts">
-import { useId } from '#app'
 import { computed, defineComponent, inject, toRef } from 'vue'
 import type { PropType } from 'vue'
 import { twMerge, twJoin } from 'tailwind-merge'
 import { useUI } from '../../composables/useUI'
+import { useFormGroup } from '../../composables/useFormGroup'
 import { mergeConfig } from '../../utils'
 import type { Strategy } from '../../types'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { radio } from '#ui/ui.config'
 import colors from '#ui-colors'
-import { useFormGroup } from '../../composables/useFormGroup'
+import { useId } from '#imports'
 
 const config = mergeConfig<typeof radio>(appConfig.ui.strategy, appConfig.ui.radio, radio)
 

src/runtime/components/forms/SelectMenu.vue

@@ -1,6 +1,5 @@
 <template>
-  <component
-    :is="searchable ? 'HCombobox' : 'HListbox'"
+  <HCombobox
     v-slot="{ open }"
     :by="by"
     :name="name"
@@ -20,13 +19,7 @@
       aria-hidden="true"
     >
 
-    <component
-      :is="searchable ? 'HComboboxButton' : 'HListboxButton'"
-      ref="trigger"
-      as="div"
-      role="button"
-      :class="uiMenu.trigger"
-    >
+    <HComboboxButton ref="trigger" as="div" role="button" :class="uiMenu.trigger">
       <slot :open="open" :disabled="disabled" :loading="loading">
         <button :id="inputId" :class="selectClass" :disabled="disabled" type="button" v-bind="attrs">
           <span v-if="(isLeading && leadingIconName) || $slots.leading" :class="leadingWrapperIconClass">
@@ -47,14 +40,14 @@
           </span>
         </button>
       </slot>
-    </component>
+    </HComboboxButton>
 
     <div v-if="open" ref="container" :class="[uiMenu.container, uiMenu.width]">
       <Transition appear v-bind="uiMenu.transition">
         <div>
           <div v-if="popper.arrow" data-popper-arrow :class="Object.values(uiMenu.arrow)" />
 
-          <component :is="searchable ? 'HComboboxOptions' : 'HListboxOptions'" static :class="[uiMenu.base, uiMenu.ring, uiMenu.rounded, uiMenu.shadow, uiMenu.background, uiMenu.padding, uiMenu.height]">
+          <HComboboxOptions static :class="[uiMenu.base, uiMenu.ring, uiMenu.rounded, uiMenu.shadow, uiMenu.background, uiMenu.padding, uiMenu.height]">
             <HComboboxInput
               v-if="searchable"
               :display-value="() => query"
@@ -65,8 +58,7 @@
               :class="uiMenu.input"
               @change="onChange"
             />
-            <component
-              :is="searchable ? 'HComboboxOption' : 'HListboxOption'"
+            <HComboboxOption
               v-for="(option, index) in filteredOptions"
               v-slot="{ active, selected, disabled: optionDisabled }"
               :key="index"
@@ -94,9 +86,9 @@
                   <UIcon :name="selectedIcon" :class="uiMenu.option.selectedIcon.base" aria-hidden="true" />
                 </span>
               </li>
-            </component>
+            </HComboboxOption>
 
-            <component :is="searchable ? 'HComboboxOption' : 'HListboxOption'" v-if="creatable && createOption" v-slot="{ active, selected }" :value="createOption" as="template">
+            <HComboboxOption v-if="creatable && createOption" v-slot="{ active, selected }" :value="createOption" as="template">
               <li :class="[uiMenu.option.base, uiMenu.option.rounded, uiMenu.option.padding, uiMenu.option.size, uiMenu.option.color, active ? uiMenu.option.active : uiMenu.option.inactive]">
                 <div :class="uiMenu.option.container">
                   <slot name="option-create" :option="createOption" :active="active" :selected="selected">
@@ -104,7 +96,7 @@
                   </slot>
                 </div>
               </li>
-            </component>
+            </HComboboxOption>
             <p v-else-if="searchable && query && !filteredOptions.length" :class="uiMenu.option.empty">
               <slot name="option-empty" :query="query">
                 No results for "{{ query }}".
@@ -115,11 +107,11 @@
                 No options.
               </slot>
             </p>
-          </component>
+          </HComboboxOptions>
         </div>
       </Transition>
     </div>
-  </component>
+  </HCombobox>
 </template>
 
 <script lang="ts">
@@ -131,10 +123,7 @@ import {
   ComboboxOptions as HComboboxOptions,
   ComboboxOption as HComboboxOption,
   ComboboxInput as HComboboxInput,
-  Listbox as HListbox,
-  ListboxButton as HListboxButton,
-  ListboxOptions as HListboxOptions,
-  ListboxOption as HListboxOption
+  provideUseId
 } from '@headlessui/vue'
 import { computedAsync, useDebounceFn } from '@vueuse/core'
 import { defu } from 'defu'
@@ -150,6 +139,7 @@ import type { SelectSize, SelectColor, SelectVariant, PopperOptions, Strategy }
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { select, selectMenu } from '#ui/ui.config'
+import { useId } from '#imports'
 
 const config = mergeConfig<typeof select>(appConfig.ui.strategy, appConfig.ui.select, select)
 
@@ -162,10 +152,6 @@ export default defineComponent({
     HComboboxOptions,
     HComboboxOption,
     HComboboxInput,
-    HListbox,
-    HListboxButton,
-    HListboxOptions,
-    HListboxOption,
     UIcon,
     UAvatar
   },
@@ -331,7 +317,6 @@ export default defineComponent({
   emits: ['update:modelValue', 'update:query', 'open', 'close', 'change'],
   setup (props, { emit, slots }) {
     const { ui, attrs } = useUI('select', toRef(props, 'ui'), config, toRef(props, 'class'))
-
     const { ui: uiMenu } = useUI('selectMenu', toRef(props, 'uiMenu'), configMenu)
 
     const popper = computed<PopperOptions>(() => defu({}, props.popper, uiMenu.value.popper as PopperOptions))
@@ -512,6 +497,8 @@ export default defineComponent({
       query.value = event.target.value
     }
 
+    provideUseId(() => useId())
+
     return {
       // eslint-disable-next-line vue/no-dupe-keys
       ui,

src/runtime/components/forms/Toggle.vue

@@ -21,7 +21,7 @@
 <script lang="ts">
 import { computed, toRef, defineComponent } from 'vue'
 import type { PropType } from 'vue'
-import { Switch as HSwitch } from '@headlessui/vue'
+import { Switch as HSwitch, provideUseId } from '@headlessui/vue'
 import { twMerge, twJoin } from 'tailwind-merge'
 import UIcon from '../elements/Icon.vue'
 import { useUI } from '../../composables/useUI'
@@ -32,6 +32,7 @@ import type { ToggleSize, Strategy } from '../../types'
 import appConfig from '#build/app.config'
 import { toggle } from '#ui/ui.config'
 import colors from '#ui-colors'
+import { useId } from '#imports'
 
 const config = mergeConfig<typeof toggle>(appConfig.ui.strategy, appConfig.ui.toggle, toggle)
 
@@ -137,6 +138,8 @@ export default defineComponent({
       )
     })
 
+    provideUseId(() => useId())
+
     return {
       // eslint-disable-next-line vue/no-dupe-keys
       ui,

src/runtime/components/navigation/CommandPalette.vue

@@ -63,7 +63,7 @@
 
 <script lang="ts">
 import { ref, computed, watch, toRef, onMounted, defineComponent } from 'vue'
-import { Combobox as HCombobox, ComboboxInput as HComboboxInput, ComboboxOptions as HComboboxOptions } from '@headlessui/vue'
+import { Combobox as HCombobox, ComboboxInput as HComboboxInput, ComboboxOptions as HComboboxOptions, provideUseId } from '@headlessui/vue'
 import type { ComputedRef, PropType, ComponentPublicInstance } from 'vue'
 import { useDebounceFn } from '@vueuse/core'
 import { useFuse } from '@vueuse/integrations/useFuse'
@@ -79,6 +79,7 @@ import type { Group, Command, Button, Strategy } from '../../types'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { commandPalette } from '#ui/ui.config'
+import { useId } from '#imports'
 
 const config = mergeConfig<typeof commandPalette>(appConfig.ui.strategy, appConfig.ui.commandPalette, commandPalette)
 
@@ -366,6 +367,8 @@ export default defineComponent({
       results
     })
 
+    provideUseId(() => useId())
+
     return {
       // eslint-disable-next-line vue/no-dupe-keys
       ui,

src/runtime/components/navigation/CommandPaletteGroup.vue

@@ -72,12 +72,13 @@
 <script lang="ts">
 import { computed, defineComponent } from 'vue'
 import type { PropType } from 'vue'
-import { ComboboxOption as HComboboxOption } from '@headlessui/vue'
+import { ComboboxOption as HComboboxOption, provideUseId } from '@headlessui/vue'
 import UIcon from '../elements/Icon.vue'
 import UAvatar from '../elements/Avatar.vue'
 import UKbd from '../elements/Kbd.vue'
 import type { Group } from '../../types'
 import { commandPalette } from '#ui/ui.config'
+import { useId } from '#imports'
 
 export default defineComponent({
   components: {
@@ -151,6 +152,8 @@ export default defineComponent({
       return content
     }
 
+    provideUseId(() => useId())
+
     return {
       label,
       highlight

src/runtime/components/navigation/Tabs.vue

@@ -33,13 +33,7 @@
     </HTabList>
 
     <HTabPanels :class="ui.container">
-      <HTabPanel
-        v-for="(item, index) of items"
-        :key="index"
-        v-slot="{ selected }"
-        :class="ui.base"
-        tabindex="-1"
-      >
+      <HTabPanel v-for="(item, index) of items" :key="index" v-slot="{ selected }" :class="ui.base">
         <slot :name="item.slot || 'item'" :item="item" :index="index" :selected="selected">
           {{ item.content }}
         </slot>
@@ -51,7 +45,7 @@
 <script lang="ts">
 import { toRef, ref, watch, onMounted, defineComponent } from 'vue'
 import type { PropType } from 'vue'
-import { TabGroup as HTabGroup, TabList as HTabList, Tab as HTab, TabPanels as HTabPanels, TabPanel as HTabPanel } from '@headlessui/vue'
+import { TabGroup as HTabGroup, TabList as HTabList, Tab as HTab, TabPanels as HTabPanels, TabPanel as HTabPanel, provideUseId } from '@headlessui/vue'
 import { useResizeObserver } from '@vueuse/core'
 import { useUI } from '../../composables/useUI'
 import { mergeConfig } from '../../utils'
@@ -59,6 +53,7 @@ import type { TabItem, Strategy } from '../../types'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { tabs } from '#ui/ui.config'
+import { useId } from '#imports'
 
 const config = mergeConfig<typeof tabs>(appConfig.ui.strategy, appConfig.ui.tabs, tabs)
 
@@ -151,6 +146,8 @@ export default defineComponent({
 
     onMounted(() => calcMarkerSize(selectedIndex.value))
 
+    provideUseId(() => useId())
+
     return {
       // eslint-disable-next-line vue/no-dupe-keys
       ui,

src/runtime/components/overlays/Modal.vue

@@ -29,13 +29,14 @@
 <script lang="ts">
 import { computed, toRef, defineComponent } from 'vue'
 import type { PropType } from 'vue'
-import { Dialog as HDialog, DialogPanel as HDialogPanel, TransitionRoot, TransitionChild } from '@headlessui/vue'
+import { Dialog as HDialog, DialogPanel as HDialogPanel, TransitionRoot, TransitionChild, provideUseId } from '@headlessui/vue'
 import { useUI } from '../../composables/useUI'
 import { mergeConfig } from '../../utils'
 import type { Strategy } from '../../types'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { modal } from '#ui/ui.config'
+import { useId } from '#imports'
 
 const config = mergeConfig<typeof modal>(appConfig.ui.strategy, appConfig.ui.modal, modal)
 
@@ -107,7 +108,7 @@ export default defineComponent({
     function close (value: boolean) {
       if (props.preventClose) {
         emit('close-prevented')
-        
+
         return
       }
 
@@ -116,6 +117,8 @@ export default defineComponent({
       emit('close')
     }
 
+    provideUseId(() => useId())
+
     return {
       // eslint-disable-next-line vue/no-dupe-keys
       ui,

src/runtime/components/overlays/Popover.vue

@@ -38,7 +38,7 @@
 import { computed, ref, toRef, onMounted, defineComponent, watch } from 'vue'
 import type { PropType } from 'vue'
 import { defu } from 'defu'
-import { Popover as HPopover, PopoverButton as HPopoverButton, PopoverPanel as HPopoverPanel } from '@headlessui/vue'
+import { Popover as HPopover, PopoverButton as HPopoverButton, PopoverPanel as HPopoverPanel, provideUseId } from '@headlessui/vue'
 import { useUI } from '../../composables/useUI'
 import { usePopper } from '../../composables/usePopper'
 import { mergeConfig } from '../../utils'
@@ -46,6 +46,7 @@ import type { PopperOptions, Strategy } from '../../types'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { popover } from '#ui/ui.config'
+import { useId } from '#imports'
 
 const config = mergeConfig<typeof popover>(appConfig.ui.strategy, appConfig.ui.popover, popover)
 
@@ -210,6 +211,8 @@ export default defineComponent({
       emit('update:open', newValue === 0)
     })
 
+    provideUseId(() => useId())
+
     return {
       // eslint-disable-next-line vue/no-dupe-keys
       ui,

src/runtime/components/overlays/Slideover.vue

@@ -17,13 +17,14 @@
 <script lang="ts">
 import { computed, toRef, defineComponent } from 'vue'
 import type { WritableComputedRef, PropType } from 'vue'
-import { Dialog as HDialog, DialogPanel as HDialogPanel, TransitionRoot, TransitionChild } from '@headlessui/vue'
+import { Dialog as HDialog, DialogPanel as HDialogPanel, TransitionRoot, TransitionChild, provideUseId } from '@headlessui/vue'
 import { useUI } from '../../composables/useUI'
 import { mergeConfig } from '../../utils'
 import type { Strategy } from '../../types'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { slideover } from '#ui/ui.config'
+import { useId } from '#imports'
 
 const config = mergeConfig<typeof slideover>(appConfig.ui.strategy, appConfig.ui.slideover, slideover)
 
@@ -100,7 +101,7 @@ export default defineComponent({
     function close (value: boolean) {
       if (props.preventClose) {
         emit('close-prevented')
-        
+
         return
       }
 
@@ -108,6 +109,8 @@ export default defineComponent({
       emit('close')
     }
 
+    provideUseId(() => useId())
+
     return {
       // eslint-disable-next-line vue/no-dupe-keys
       ui,