fix(components): hydration attribute mismatch with vue 3.4

[benjamincanac]

🔗 Linked issue

Fixes #1171, fixes nuxt/ui-pro#181

❓ Type of change

• 📖 Documentation (updates to the documentation or readme)
• 🐞 Bug fix (a non-breaking change that fixes an issue)
• 👌 Enhancement (improving an existing functionality)
• ✨ New feature (a non-breaking change that adds functionality)
• 🧹 Chore (updates to the build process or auxiliary tools and libraries)
• ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

We leverage the new useId composable from Nuxt v3.10.0 and provideUseId from Headless UI v1.7.18 (tailwindlabs/headlessui#2959) to fix hydration mismatches warned since Vue v3.4.

Warning

Since we leverage useId, you'll need to install Nuxt v3.10.0.

📝 Checklist

• I have linked an issue or discussion.
• I have updated the documentation accordingly.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
ui	✅ Ready (Inspect)	Visit Preview	Feb 6, 2024 11:40am

[MuhammadM1998]

useId has been added in Nuxt 3.10 nuxt/nuxt#23368 which will internally swap to vue's implementation when it ships in vue 3.5 which won't affect the user. Do you think utilizing it directly will be easier?

[benjamincanac]

This PR was just a test, I'll use useId from Nuxt 3.10 instead.

[benjamincanac]

@MuhammadM1998 I've updated the PR, do you want to take a look?

[benjamincanac]

There are still some hydration issues on the Disclosure component but we can't do anything about it yet: tailwindlabs/headlessui#2913

[MuhammadM1998]

Yeah you mentioned that in another PR I think and I saw it. Seems good to me and I can help testing it locally (or testing the edge release after this gets merged) if you want

[benjamincanac]

Would be very helpful yes! 😊 I've seen some hydration issues remaining on checkbox still.

[MuhammadM1998]

Sure I'll take a look at it asap

[benjamincanac]

I'm also having some issues with the Tabs and Combobox.

[MuhammadM1998]

I'll check them too when I have some time hopefully

[MuhammadM1998]

Sorry I was really busy this week. Its on my todo list for the weekend and I'll try my best to test it. I see you bumped headless vue which should solve more issues with the IDs right?

[benjamincanac]

@MuhammadM1998 Should be good now yes 😊

[hansemannn]

Amazing work, thank you @benjamincanac for being so responsive with community reports!

[benjamincanac]

Of course! It took a bit of time but it wasn't possible to fix before Nuxt useId and Headless UI provideUseId.

[dosstx]

Does this mean we wait for the next Nuxt UI update or was there something we can do now? I don't mind waiting.

[benjamincanac]

I'm not sure when I'll make a release yet but in the meantime, you can either keep the resolutions or use the edge package: https://ui.nuxt.com/getting-started/installation#edge

[dosstx]

That's right, I had forgotten about the edge channel. I can wait for the official release. Thank you!