fix: floating vue hydration mismatch

[connoratrug]

The VDropdown component from the floating-vue lib results in a hydration errors due to the way the lib edits the dom issue is reported: Akryum/floating-vue#1006

Workaround implemented as proposed in: Akryum/floating-vue#1006 (comment)

how to test:

• load nuxt app page that contains VDropdown component in dev mode before this pr and check the console log; lots of warnings about hydration mismatch in vdropdown ( popper )
  something like:

• load nuxt app page that contains VDropdown component in dev mode from pr and check the console log; hydration error related to vdropdown should be gone

todo:

• updated docs in case of new feature
• added tests

[sonarcloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
No data about Coverage
No data about Duplication

See analysis details on SonarCloud

[davidruvolo51]

Looks good. I'm able to reproduce this locally. The hydration warnings for <VDropdown> are gone.

I get one hydration warning when the <MainNavigation> is loaded. The <VMenu> component is used here instead. Could the same fix apply here?

[connoratrug]

Looks good. I'm able to reproduce this locally. The hydration warnings for <VDropdown> are gone.

I get one hydration warning when the <MainNavigation> is loaded. The <VMenu> component is used here instead. Could the same fix apply here?

o yea good catch , i'll merge this and create a new pr , if these warnings are gone it will be easer to see other warnings , and i'll try to do a search for all the V.... components that might have similar issues , not sure of all of the floating vue components use the generated id ( that leads to the warning)