Hydration mismatch in Nuxt app after updating Oruga from 0.7 to 0.8.x

[andrzejkupczyk]

Overview of the problem

Oruga version: 0.8.6
Vuejs version: 3.4.21
OS/Browser: macOS/Chrome

Description

I'm encountering a hydration mismatch issue with the Autocomplete component while upgrading my Nuxt 3.11.1 app from Oruga version 0.7 to 0.8.6.

I have noticed similar problem reports in vue and nuxt before, but afaik, those problems have been fixed. This issue does not impact other components in Oruga, and it functions properly in Oruga 0.7 version. Hence, I wanted to report the issue here.

Expected behavior

The autocomplete component has the same id on both the server and client side.

Actual behavior

The Autocomplete component on the client side receives a different ID, causing a mismatch in the hydration attribute.

[andrzejkupczyk]

I'm not sure if this will be helpful, but I came across this information: https://www.radix-vue.com/utilities/config-provider.html#hydration-issue-vue-3-5
I am unfamiliar with this framework, but it appears that the problem is comparable (link to the PR).

[mlmoravek]

Ok, so I have just learnt a bit. With nuxt the script is executed twice, once on the server and once on the client. However, in our case the id is generated randomly. So there will be a different id generated on the server then on the client.

But we have to wait some more time. A vue native useId composable is confirmed for vue 3.5 which should solve this problem.
vuejs/rfcs#557

[andrzejkupczyk]

The reason the radix-vue authors referred to their solution as a temporary workaround is now clear. Thanks a bunch!