`getRandomId` used for components ID is not compatible with Nuxt SSR

[ambroisemaupate]

Hello vue-dsfr team!

When using Nuxt 3 Every component used in Nuxt server-side rendering will lead to Hydratation mismatch errors

When used in Nuxt 3.10+ context, all component may call useId method which provides an isomorphic ID between server and client

https://nuxt.com/docs/api/composables/use-id

[laruiss]

Oui, tout à fait, et j’ai fait en sorte que tous les id puissent être transmis en props. Libre donc à vous d’utiliser useId pour donner un id compatible SSR. Si vous pensez que j’en ai oublié, faites-le moi savoir. Nous ne souhaitons pas embarquer une dépendance en plus qui ne concerne que ceux qui utilisent Nuxt.

[ambroisemaupate]

Hello @laruiss

Merci pour ta réponse.

Je crois qu'il reste des getRandomId sans override possible dans les composants :

• SideMenu : https://github.com/dnum-mi/vue-dsfr/blob/main/src/components/DsfrSideMenu/DsfrSideMenu.vue#L74
• Tabs : https://github.com/dnum-mi/vue-dsfr/blob/main/src/components/DsfrTabs/DsfrTabs.vue#L58

[laruiss]

Pour les tabs, il y a tout ce qu’il faut pour mettre des ids et que la fonction getRandomId ne soit pas appelée.

Pour SideMenu, j’ai fait la correction, elle sera disponible très bientôt.