Adding hreflang alternate links in head

I’m trying to automatically add the hreflang links in the head but it’s not that easy.

I moved the locales array outside of the module.exports and added the following code in thenuxt.config.js file and it kinda works:

const locales = [
  { code: 'en', ... },
  { code: 'fr', ... }
]

module.exports = {
  ...
  head: {
    link: [
      ...
    ].concat((function () {
      let alternates = []
      locales.forEach((locale) => {
        alternates.push({
          hid: `alternate-${locale.code}`,
          rel: 'alternate',
          hreflang: locale.code,
          href: `https://example.com/${locale.code}`
        })
      })
      return alternates
    })())
  }
}

However, I didn’t find a way to dynamically change the href value. The method switchLocalePath() is not accessible from the nuxt.config.js file and it seems we can’t access to this.$route.name too.

Any idea on how to do that? What about nuxt-i18n injecting theses alternate links by default since Nuxt is sold as SEO-friendly out of the box. It would be a great addition to the module.

Finally an unrelated question. Why nuxt-i18n is not a scoped package like the sitemap module for instance @nuxtjs/sitemap?

<div align="right">_{This question is available on Nuxt.js community (#c4)}</div>

[phortx]

@paulgv This is a serious issue not just because of the broken tags but also because it generates thousands of warnings which really causes high cpu usage and makes the app slow.

[mirash333]

Ok, I think I found a solution to the problem, in layouts, in default.vue we create a base head for our application and take the fields with this.$nuxtI18nSeo():

head() {
    return {
        link: this.$nuxtI18nSeo().link.filter(
            (item) => (item.rel = 'alternate' && item.hreflang)
            ),
        }
    },

This option will dynamically create links, so far I see the solution to this problem like this.Hope helped.