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

Locale keeps resetting between switching pages. Nuxt-i18n – SEO

I am trying to set up localization for my Nuxt frontend. Every time I switch to English and then move to an other subpage of my website it does reset back to German.

This is my LanguageSelector

<template>
  <div class="lang-dropdown">
    <select v-model="$i18n.locale">
      <option
        v-for="lang in $i18n.locales"
        :key="lang.code"
        :value="lang.code"
        onchange="changeLocale"
      >
        {{ lang.name }}
      </option>
    </select>
  </div>
</template>

This is my i18n config file

import de from '../locales/de.json'
import en from '../locales/en.json'

export default {
  local: 'en',
  fallbackLocale: 'de',
  messages: { de, en },
  strategy: 'prefix'
}

This is my buildModules section of the Nuxt.config.js

 ['nuxt-i18n',
      {
        defaultLocale: 'de',
        seo: true,
        locales: [
          {
            code: 'de',
            name: 'Deutsch',
            iso: 'de-DE'
          },
          {
            code: 'en',
            name: 'English',
            iso: 'en-US'
          }
        ],
        vueI18n: i18n
      }]
Tags:

3

Answers


  1. 0

    according to this quote from nuxtjs/i18n docs

    When using detectBrowserLanguage and wanting to persist locale on a route change, you must call one of the functions that update the stored locale cookie. Call either setLocaleCookie(locale) to persist just the cookie locale or setLocale(locale) to both persist the cookie locale and switch the route to the specified locale. Otherwise, locale might switch back to the saved one during navigation.

    https://i18n.nuxtjs.org/lang-switcher

    you should use $i18n.setLocale instead of changing the property locale
    using setLocale will change the cookie that stores the chosen locale

    in your case this code should work

    <template>
  <div class="lang-dropdown">
    <select @change="(e) => $i18n.setLocale(e.target.value)">
      <option
        v-for="lang in $i18n.locales"
        :key="lang.code"
        :value="lang.code"
        onchange="changeLocale"
      >
        {{ lang.name }}
      </option>
    </select>
  </div>
</template>
    Login or Signup to reply.
  2. 0

    Al-bimani’s answer is what it says in documentation. However it didn’t work for me. So I realized my mistake. I had a nuxt-link like this for example:

    <nuxt-link to="/about"> // instead of this I started using this;
<nuxt-link :to="localePath('/about')">

    Before localePath it was resetting the locale after navigation. After adding localePath in nuxt-link it simply navigates with the locale you change.

    Login or Signup to reply.
  3. 0

    Set in your nuxt config:

    i18n: {
    ...
    strategy: 'no_prefix',
    ...
}

    to prevent the switch when always working with the same URLs (so not with /en/foo and /de/foo but just /foo) to keep the locale between nuxt-links which you somewhere set by this.$i18n.setLocale('en'); before.

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

Back To Top
Search