Handle anchors correctly

[TheAlexLichter]

I want to use nuxt-i18n to "translate" anchor links (though it might sound weird).

Example config:

 locales: [
    {
      code: 'en',
      iso: 'en-US',
      name: 'English'
    },
    {
      code: 'de',
      iso: 'de-DE',
      name: 'Deutsch'
    }
  ],
  defaultLocale: 'en',
    work: {
      de: '/referenzen'
    },
    '#contact-us': {
      de: '#schreib-uns'
    },

If I iterate over all links and use the localePath function..

  <nuxt-link
          v-for="link in links"
          :key="link"
          :to="localePath(link)">
          {{ $t(`links.link`) }}

the anchor tag isn't resolved correctly. I guess that the problem lies in the export of base routes while ignoring other routes that aren't included in the base routes of Nuxt

_{This question is available on Nuxt.js community (#c6)}

[paulgv]

Hi @manniL !
To translate anchor links, you could simply use vue-i18n to generate localized ID's for your DOM.
Here's how I'd do it:

<template>
  <section>
    <a :href="`#${$t('contactus_anchor')}`">Contact link</a>
    <!-- More stuff here -->
    <div :id="$t('contactus_anchor')">
      Contact content
    </div>
  </section>
</template>

And in your translations files:

// en
module.exports = {
  contactus_anchor: 'contact-us'
}

// de
module.exports = {
  contactus_anchor: 'schreib-uns'
}

[TheAlexLichter]

Thanks for the fast answer!
I pursued that approach, though it feels a little "hacky". But it works great ☺️

[israelmuca]

I know this is closed already, but if someone wants another workaround for this problem, I'm using a button with @click="viewGallery"

viewGallery:

viewGallery() {
      let route = this.localePath("story")+"/#gallery"
      this.$router.push(route)
    }