seo Question posted in
Some basic information to get you started with this can be found here.

Language Switcher doesn't apply the new locale – SEO

I’m starting a new website with Nuxt and I’m currently setting it to be multilingual (french and english)

I followed this tutorial to setup the translation and the language switcher, and got the following:

nuxt.config.js (relevant part)

    ['nuxt-i18n', {
      detectBrowserLanguage: {
        useCookie: true,
        alwaysRedirect: true
      },
      strategy: 'prefix_except_default',
      defaultLocale: 'fr',
      parsePages: false,
      seo: true,
      pages: {
        about: {
          en: '/about-us',
          fr: '/a-propos'
        },
        portfolio: {
          en: '/projects',
          fr: '/portfolio'
        }
      },
      locales: [
        {
          code: 'en',
          iso: 'en-US',
          name: 'English',
          file: 'en-US.js'
        },
        {
          code: 'fr',
          iso: 'fr-FR',
          name: 'Français',
          file: 'fr-FR.js'
        }
      ],
      lazy: true,
      langDir: 'lang/'
    }]

navbar.vue

  <nav class="header">
    <div class="logo">
      <nuxt-link :to="localePath('index')">
        <img src="https://bulma.io/images/bulma-logo.png" alt="Bulma: a modern CSS framework based on Flexbox" width="112" height="28">
      </nuxt-link>
    </div>
    <div class="links">
      <nuxt-link :to="localePath('about')">
        {{ $t('navbar.about') }}
      </nuxt-link>
      <nuxt-link :to="localePath('blog')">
        Blog
      </nuxt-link>
      <nuxt-link :to="localePath('portfolio')">
        Portfolio
      </nuxt-link>
      <nuxt-link :to="localePath('contact')">
        Contact
      </nuxt-link>
      <span>|</span>
      <nuxt-link v-if="$i18n.locale === 'fr'" :to="switchLocalePath('en')">
        English
      </nuxt-link>
      <nuxt-link v-else :to="switchLocalePath('fr')">
        Français
      </nuxt-link>

      {{ $i18n.locale }}
    </div>
  </nav>

Here is my directory structure (if that can help)

layouts/
  front.vue
  navbar.vue

pages/
  index.vue
  about.vue
  blog.vue
  portfolio.vue
  contact.vue

The navbar.vue file is called inside front.vue, which is my layout.

The problems are the following:

  • On any page, when I try to click the languageSwitcher link, I get redirected to its english version (ie: /a-propos becomes /en/about-us), however the other links will bring me back to the french version.
  • {{ $i18n.locale }} keeps displaying fr
  • I tried the following block of code:
<template>
  ...
  <nuxt-link
    v-for="locale in availableLocales"
    key="locale.code"
    :to="switchLocalePath(locale.code)"
  >
    {{ locale.name }}
  </nuxt-link>
  ...
</template

<script>
export default {
  computed: {
    availableLocales () {
      return this.$i18n.locales.filter(i => i.code !== this.$i18n.locale)
    }
  }
}
</script>

And it only displays english, while it should display me both english and french.

What have I done wrong, or what am I missing?

Tags:

2

Answers


  1. 0

    this is due to alwaysRedirect: true, set it to false

    Login or Signup to reply.
  2. 0

    This worked for me, using vue-select and availableLocales of Nuxt-$i18n, hope it helps:

    <template>
  <div>
    <client-only>
     <b-navbar>
       <div class="container">
      <b-navbar-brand
        class="navbar-brand-custom mr-2"
        :to="localePath('index')"
        :title="title">

      <div class="d-flex flex-row order-2 order-lg-3 ml-auto text-capitalize">
        <b-navbar-nav class="d-flex flex-row">
          <!-- Language menu -->
          <v-select
            v-model="selected"
            v-for="(lang, index) in availableLocales"
            :key="index"
            :value="lang.code"
            :searchable="false"
            @input="onChange"
            class="vue-select-custom"
          ></v-select> 
          <!-- Navbar menu -->
          <b-nav-item-dropdown
            id="menu-links"
            right
            no-caret
            role="manu"
            class="ml-0"
            menu-class="animated fadeIn text-right menu-links rounded-0"
          >
            <span class="dropdown-menu-arrow"></span>

            <template
              v-slot:button-content
              style="height:42px"
            >
          </b-nav-item-dropdown>
        </b-navbar-nav>
      </div>
    </div>
  </b-navbar>
  </client-only>


    <script>
  export default {
   data() {
     return {
       selected: this.$i18n.locale
     }
   },
   computed: {
    availableLocales() {
     return this.$i18n.locales.filter(i => i.code !== this.$i18n.locale);
   },
 },
 .....
 methods: {
  onChange(locale) {
    var language = locale.toLocaleLowerCase();
    this.$i18n.setLocaleCookie(language)
    this.$router.replace(this.switchLocalePath(language));
  },
  ....
 }
}

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search