UCarousel with Arrows enabled causes Hydration Attribute Mismatch

[LynxTR]

Environment

• Operating System: Linux
• Node Version: v18.18.0
• Nuxt Version: 3.13.0
• CLI Version: 3.13.1
• Nitro Version: 2.9.7
• Package Manager: [email protected]
• Builder: -
• User Config: compatibilityDate, experimental, css, modules, devtools, sanctum, formkit, colorMode, htmlValidator, app
• Runtime Modules: @formkit/auto-animate/[email protected], @formkit/[email protected], @nuxtjs/[email protected], @nuxtjs/[email protected], @nuxt/[email protected], @unocss/[email protected], @vueuse/[email protected], [email protected]
• Build Modules: -

Version

v2.18.4

Reproduction

https://stackblitz.com/edit/nuxt-ui-n3dolc

Description

Late attribute render of disabled="true" causes hydration mismatch

Additional context

Logs

No response

[tahirmahmudzade]

Environment

* Operating System: Linux

* Node Version:     v18.18.0

* Nuxt Version:     3.13.0

* CLI Version:      3.13.1

* Nitro Version:    2.9.7

* Package Manager:  [email protected]

* Builder:          -

* User Config:      compatibilityDate, experimental, css, modules, devtools, sanctum, formkit, colorMode, htmlValidator, app

* Runtime Modules:  @formkit/auto-animate/[email protected], @formkit/[email protected], @nuxtjs/[email protected], @nuxtjs/[email protected], @nuxt/[email protected], @unocss/[email protected], @vueuse/[email protected], [email protected]

* Build Modules:    -

Version

v2.18.4

Reproduction

https://stackblitz.com/edit/nuxt-ui-n3dolc

Description

Late attribute render of disabled="true" causes hydration mismatch

Additional context

Logs

No response

hey i am facing the same issue, did you find a solution ?

[LynxTR]

@tahirmahmudzade Sorry for late response, i used the named slots to render buttons client only:

  <UCarousel :items="items" :ui="{ item: 'basis-1/3' }" arrows>
 <template #prev="{ onClick, disabled }">
      <ClientOnly>
        <UButton
          :disabled="disabled"
          @click="onClick"
          :ui="{
            rounded: 'rounded-full',
          }"
          color="gray"
          icon="i-ph:arrow-left-duotone"
          variant="solid"
          aria-label="Anterior"
          class="-start-12 absolute top-1/2 -translate-y-1/2"
        ></UButton>
      </ClientOnly>
    </template>
    <template #next="{ onClick, disabled }">
      <ClientOnly>
        <UButton
          :disabled="disabled"
          @click="onClick"
          :ui="{
            rounded: 'rounded-full',
          }"
          color="gray"
          icon="i-ph:arrow-right-duotone"
          variant="solid"
          aria-label="Siguiente"
          class="-end-12 absolute top-1/2 -translate-y-1/2"
        ></UButton>
      </ClientOnly>
    </template>

    <!-- here the items -->
 </UCarousel>