Hydration issues - Nuxt 3/Vue 3

[jawngee]

This just started showing up in the latest Nuxt 3.9, probably due to the Vue version bump but I'm not sure.

Getting a lot of Hydration attribute mismatch because the ID of the popper is different from SSR. Errors look like:

- rendered on server: id=\"popper_44tr48ae_tdggwc\"
- expected on client: id=\"popper_gjw3s4ml_tdglzw\"
  Note: this mismatch is check-only. The DOM will not be rectified in production due to performance overhead.

Not sure how to solve this or if it has any real impact at all.

[simba77]

As a temporary solution, you can add the aria-id attribute
<v-dropdown aria-id="some-dropdown">

[Akryum]

Yes you can use ariaId prop to prevent using a random id for the aria-describedby attribute.
Maybe it could be fixed in nuxt via the module but I'm not sure.

[Akryum]

Also is this caused by popper that are already open when they are rendered on the server? For example with :shown="true"

[jawngee]

Thanks, I will give the aria thing a try. No, they aren't opened but let me double check that t confirm.

…

On Jan 11, 2024, at 6:09 PM, Guillaume Chau ***@***.***> wrote: Also is this caused by popper that are already open when they are rendered on the server? For example with :shown="true" — Reply to this email directly, view it on GitHub <#1006 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAAK3ILITTJDSC6KWYMWSMTYN7B6ZAVCNFSM6AAAAABBIFQFEKVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTQOBWHEYDANZXHA>. You are receiving this because you authored the thread.

[sbittmann]

in Nuxt3 I used

<ClientOnly>
    <template #fallback>
        <Item2Render />
    </template>
    <VTooltip>
        <Item2Render />
        <template #popper>
            <PopperContent />
        </template>
    </VTooltip>
<ClientOnly>

[yoshrubin]

the above works for the ariaId issue but I am getting

 - rendered on server: tabindex=""
  - expected on client: tabindex="0"
  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 <VPopperContent ref="popperContent" popper-id="dropdown" theme="info-dropdown"  ... > 
  at <Popper ref="popper" theme="info-dropdown" referenceNode=null  ... > 
  at <Dropdown triggers= ['click'] skidding=-30 distance=25 > 

when using a Dropdown so the contents of the Popper are clickable

[Mini-ghost]

Yes you can use ariaId prop to prevent using a random id for the aria-describedby attribute. Maybe it could be fixed in nuxt via the module but I'm not sure.

This was useful for me, but it might not be the best approach as it causes the vuejs-accessibility's aria-props to throw errors at me. I wonder if there's another way to address this?

[max13h]

the above works for the ariaId issue but I am getting

 - rendered on server: tabindex=""
  - expected on client: tabindex="0"
  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 <VPopperContent ref="popperContent" popper-id="dropdown" theme="info-dropdown"  ... > 
  at <Popper ref="popper" theme="info-dropdown" referenceNode=null  ... > 
  at <Dropdown triggers= ['click'] skidding=-30 distance=25 > 

when using a Dropdown so the contents of the Popper are clickable

Hey, same issue here

Did you found a solution to that please ?

[Dodje]

I believe it's not a very good thing to generate id for every tooltip and dropdown manually..

[Nuzzlet]

Headless UI solved this problem with the new UseID function in Nuxt
This solution uses Nuxt's new UseID composable to generate an SSR safe ID.
The warning is caused by the latest version of Nuxt which improved hydration mismatch detection.

[Nuzzlet]

My soloution for the time being is this:

<script setup>
    const ariaId = useId()
</script>

<template>
    <VDropdown :aria-id="ariaId"  />
</template>