Nuxt•3mo ago

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()

5 Replies

kapa.ai•3mo ago

Hi @Basti. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- This is an interesting issue related to i18n and anchor links in Nuxt. Based on the knowledge sources provided, there isn't a direct solution mentioned for this specific problem. However, I can offer some insights and a potential workaround based on related information. The core of the issue stems from how NuxtLink and the i18n module handle URLs with hash fragments when switching locales. As you've correctly identified, the hash fragment doesn't get translated when changing languages, leading to broken anchor links. A potential workaround for this issue could be inspired by a recent fix for a similar problem with NuxtLink and hash links. According to the Github pull request, there was an issue where NuxtLink would prepend the current route's path to hash links, causing unexpected behavior. While this fix doesn't directly solve your problem, it suggests a possible approach: 1. Instead of using NuxtLink for anchor links, you could use a regular <a> tag for links that start with '#'. 2. Implement a custom directive or component that handles the language switching and anchor translation. Here's a conceptual example of how you might implement this:

<template>
  <a :href="'#' + $t('contact')" @click="handleClick">
    {{ $t('to_contact') }}
  </a>
  <div :id="$t('contact')">
    <!-- Whatever contact information -->
  </div>
</template>

<script setup>
const { t, locale } = useI18n()
const router = useRouter()

const handleClick = (event) => {
  event.preventDefault()
  const hash = '#' + t('contact')
  router.push({ path: router.currentRoute.value.path, hash })
}
// Watch for locale changes
watch(locale, (newLocale) => {
  // Update the hash when the locale changes
  const newHash = '#' + t('contact')
  router.replace({ path: router.currentRoute.value.path, hash: newHash })
})
</script>

<template>
  <a :href="'#' + $t('contact')" @click="handleClick">
    {{ $t('to_contact') }}
  </a>
  <div :id="$t('contact')">
    <!-- Whatever contact information -->
  </div>
</template>

<script setup>
const { t, locale } = useI18n()
const router = useRouter()

const handleClick = (event) => {
  event.preventDefault()
  const hash = '#' + t('contact')
  router.push({ path: router.currentRoute.value.path, hash })
}
// Watch for locale changes
watch(locale, (newLocale) => {
  // Update the hash when the locale changes
  const newHash = '#' + t('contact')
  router.replace({ path: router.currentRoute.value.path, hash: newHash })
})
</script>

This approach: 1. Uses a regular <a> tag instead of NuxtLink for the anchor. 2. Handles the click event manually to update the route. 3. Watches for locale changes and updates the hash accordingly. Please note that this is a conceptual solution and may need adjustments to work in your specific setup. It's also worth mentioning that this approach might have implications for SEO and accessibility, so thorough testing would be necessary. For a more robust solution, you might want to consider creating a feature request in the Nuxt i18n module's repository, as this seems like a use case that could benefit many users. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3mo ago

<@215130598988054528> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

BastiOP•3mo ago

@kapa.ai Neither of these solve the issue since the links and anchors switch languages correctly and work as intended. The issue lies in switchLocalePath() which doesn't consider the translation of the anchors in the URL.

kapa.ai•3mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- I apologize for the misunderstanding in my previous response. You're correct that the issue lies specifically with switchLocalePath() not considering the translation of anchors in the URL. After reviewing the knowledge sources again, I couldn't find any information directly addressing this specific problem with switchLocalePath() and anchor translations in Nuxt i18n. Given the lack of a direct solution in the provided knowledge sources, I can't offer a definitive answer to your problem. The behavior you're describing seems to be a limitation of the current implementation of switchLocalePath() in Nuxt i18n. Since this appears to be a specific edge case not covered in the standard functionality, you might want to consider: 1. Creating an issue in the Nuxt i18n GitHub repository to bring attention to this problem. This could lead to a future enhancement of the switchLocalePath() function to handle translated anchors. 2. Implementing a custom solution that extends or wraps the switchLocalePath() function to handle anchor translations. However, without more context about the internals of Nuxt i18n, I can't provide a code example for this approach. I apologize that I couldn't provide a more concrete solution to your problem. If you need a definitive answer or workaround, it might be best to reach out to the Nuxt i18n maintainers directly or post an issue on their GitHub repository. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3mo ago

<@215130598988054528> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Gaming

Programming

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

Did you find this page helpful?