Basti Posts - Answer Overflow

Basti

•Created by Basti on 1/31/2025 in #❓・help

i18n - Switching locales fails if an anchor has been clicked beforehand.

If there is an anchor which jumps to a certain section of the page, the anchor can not have different names (can't be translated). For instance if I click the following link:

<NuxtLink to="#contact">
  {{ $t('to_contact') }}
</NuxtLink>
<div id="contact">
  <!-- Whatever contact information -->
</div>

<NuxtLink to="#contact">
  {{ $t('to_contact') }}
</NuxtLink>
<div id="contact">
  <!-- Whatever contact information -->
</div>

I will get a url like this

https://www.example.com/#contact

https://www.example.com/#contact

But if I were to translate the id of the anchor element, there is no anchor with that name on the other locale, so it can't switch.

<NuxtLink :to="'#' + t('contact')">
  {{ $t('to_contact') }}
</NuxtLink>
<div :id="t('contact')">
  <!-- Whatever contact information -->
</div>

<NuxtLink :to="'#' + t('contact')">
  {{ $t('to_contact') }}
</NuxtLink>
<div :id="t('contact')">
  <!-- Whatever contact information -->
</div>

If I now click the above link and then translate the page from, say, english to spanish, Nuxt will attempt to go from

https://www.example.com/#contact

https://www.example.com/#contact

https://www.example.com/es/#contact

https://www.example.com/es/#contact

but the anchor in the spanish version would be called #contacto with an 'o' at the end, so it doesn't find the page. Is there a workaround for this? I tried some string manipulation to delete everything in the url after the # but that doesn't work with switchLocalePath()

9 replies

NNuxt

•Created by Basti on 7/30/2024 in #❓・help

Module not found when trying to install a shadcn module

2 replies

Gaming

Programming