MenuBar: Hydration Errors in v3.51.0

[rickngo]

Describe the bug

After updating to v3.51.0, I am now receiving hydration errors for the MenuBar component. This is occurring on Chrome (Windows and Mac) and Firefox, that I've tested so far.

When I downgrade to v3.50.0, there are no hydration errors

Reproducer

https://stackblitz.com/edit/primevue-nuxt-issue-template-a9mcrv?file=components%2FNavBar.vue,app.vue,package.json,package-lock.json

PrimeVue version

3.51.0

Vue version

3.x

Language

TypeScript

Build / Runtime

Nuxt

Browser(s)

No response

Steps to reproduce the behavior

Please see Stackblitz. I created a MenuBar component with routes and rendered it in the App

Expected behavior

No hydration errors

[rizen]

+1

[i7slegend]

relates to #5486

i think i never win this SSR 🥲

[nakku-tricks]

+1

[Yves852]

As a solution you can provide an SSR-friendly id with useId() in Nuxt >= 3.10:

<script setup>
+  const MenubarId = useId()
</script>

<template>
    <Menubar
+     :id="MenubarId"
      :model="items"
    >
        <!-- ... -->
    </Menubar>
</template>

https://nuxt.com/docs/api/composables/use-id
https://primevue.org/menubar/#api.menubar.interfaces.MenubarFocusedItemInfo.parentKey

[tugcekucukoglu]

Sorry for the confusion. It will be fixed for the next version.