SwitchLocalePathLink hydration mismatch when using anchor links

[oom-]

Environment

---

• Operating System: Linux
• Node Version: v20.19.1
• Nuxt Version: 3.17.5
• CLI Version: 3.25.1
• Nitro Version: 2.11.12
• Package Manager: [email protected]
• Builder: -
• User Config: devtools, modules, i18n, compatibilityDate
• Runtime Modules: @nuxtjs/[email protected]
• Build Modules: -

---

Reproduction

https://stackblitz.com/edit/bobbiegoede-nuxt-i18n-starter-22qdkwcy?file=pages%2Findex.vue

Describe the bug

When using anchor links like: yourwebsite.xyz#section2 with the component: SwitchLocalePathLink. Is resulting in Hydration mismatch:

runtime-core.esm-bundler.js:51 [Vue warn]: Hydration attribute mismatch on 
  - rendered on server: href="/"
  - expected on client: href="/#anchor"
  Note: this mismatch is check-only. The DOM will not be rectified in production due to performance overhead.
  You should fix the source of the mismatch. 
  at <RouterLink ref=fn to="/#anchor" activeClass=undefined  ... > 
  at <NuxtLink to="/#anchor" > 
  at <SwitchLocalePathLink locale="en" > 
  at <Index onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > 
  at <RouteProvider key="/" vnode= 
Object
 route= 
Object
  ... > 
  at <RouterView name=undefined route=undefined > 
  at <NuxtPage > 
  at <App key=4 > 
  at <NuxtRoot>

Additional context

1. Go on the reproduction page: https://stackblitz.com/edit/bobbiegoede-nuxt-i18n-starter-22qdkwcy?file=pages%2Findex.vue.

2. Add #anchor at the end of the URL in the preview and hard reload the page.

3. Open the console with F12

Logs

runtime-core.esm-bundler.js:51 [Vue warn]: Hydration attribute mismatch on 
 
  - rendered on server: href="/"
  - expected on client: href="/#anchor"
  Note: this mismatch is check-only. The DOM will not be rectified in production due to performance overhead.
  You should fix the source of the mismatch. 
  at <RouterLink ref=fn to="/#anchor" activeClass=undefined  ... > 
  at <NuxtLink to="/#anchor" > 
  at <SwitchLocalePathLink locale="en" > 
  at <Index onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > 
  at <RouteProvider key="/" vnode= 
Object
 route= 
Object
  ... > 
  at <RouterView name=undefined route=undefined > 
  at <NuxtPage > 
  at <App key=4 > 
  at <NuxtRoot>

runtime-core.esm-bundler.js:51 [Vue warn]: Hydration attribute mismatch on 
 
  - rendered on server: href="/nl"
  - expected on client: href="/nl#anchor"
  Note: this mismatch is check-only. The DOM will not be rectified in production due to performance overhead.
  You should fix the source of the mismatch. 
  at <RouterLink ref=fn to="/nl#anchor" activeClass=undefined  ... > 
  at <NuxtLink to="/nl#anchor" > 
  at <SwitchLocalePathLink locale="nl" > 
  at <Index onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > 
  at <RouteProvider key="/" vnode= 
Object
 route= 
Object
  ... > 
  at <RouterView name=undefined route=undefined > 
  at <NuxtPage > 
  at <App key=4 > 
  at <NuxtRoot>

runtime-core.esm-bundler.js:51 [Vue warn]: Hydration attribute mismatch on 
 
  - rendered on server: href="/ja"
  - expected on client: href="/ja#anchor"
  Note: this mismatch is check-only. The DOM will not be rectified in production due to performance overhead.
  You should fix the source of the mismatch. 
  at <RouterLink ref=fn to="/ja#anchor" activeClass=undefined  ... > 
  at <NuxtLink to="/ja#anchor" > 
  at <SwitchLocalePathLink locale="ja" > 
  at <Index onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > 
  at <RouteProvider key="/" vnode= 
Object
 route= 
Object
  ... > 
  at <RouterView name=undefined route=undefined > 
  at <NuxtPage > 
  at <App key=4 > 
  at <NuxtRoot>

[BobbieGoede]

Thank you for reporting this issue 🙏

The hydration mismatch occurs since hash fragments are not sent to the server, not sure what the right approach to resolving this would be at the moment.

While the warning is annoying and needs to be resolved, the links themselves (and everything else) should still be working as expected (hence the labeling), if this is not the case please let me know.

[oom-]

Something that could work too, would be a prop on the componant to remove the hash from the generated url. (I went for this solution, but using NuxtLink component directly)

This option would make sens as the SwitchLocalePathLink component will usually point to a toogle button / drop down menu to select a new current locale I suppose.

So you usually dont want it to change the locale + go back to a certain hash, but I suppose this could happen if you refer to a certain section in a page showing some documentation or something long.

So maybe clear the hash as default behavior and specify one as a prop or replicate hash without warning for edge case ?