Skip to content

UNavigationMenu Accordion hydration mismatch #5529

@Ragura

Description

@Ragura

Environment

Not applicable.

Is this bug related to Nuxt or Vue?

Nuxt

Package

v4.x

Version

4.2

Reproduction

https://github.com/nuxt-ui-templates/dashboard

Description

There is a hydration mismatch related to UNavigationMenu. You can clearly see it on the official dashboard template, so I didn't supply my own reproduction. It concerns these lines related to Accordion items in the menu:

<div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-1" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width:var(--reka-collapsible-content-width);--reka-accordion-content-height:var(--reka-collapsible-content-height);--reka-collapsible-content-height:0px;--reka-collapsible-content-width:0px;" class="data-[state=open]:animate-[collapsible-down_200ms_ease-out] data-[state=closed]:animate-[collapsible-up_200ms_ease-out] overflow-hidden" id="reka-collapsible-content-v-0-0-2" hidden="">

versus

<div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-1" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[collapsible-down_200ms_ease-out] data-[state=closed]:animate-[collapsible-up_200ms_ease-out] overflow-hidden" id="reka-collapsible-content-v-0-0-2" hidden="">

It's inconspicious at first, but the difference is in the extra whitespace in the second vs first render within the style attribute.

--reka-accordion-content-width:var(--reka-collapsible-content-width);--reka-accordion-content-height:var(--reka-collapsible-content-height);

vs

--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height);

There's extra whitespace around the colon and semicolons, causing the hydration mismatch.

Additional context

No response

Logs

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't workingtriageAwaiting initial review and prioritizationv4#4488

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions