vue.js - Locale keeps resetting between switching pages. Nuxt-i18n

Question

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
      }]

question from:https://stackoverflow.com/questions/65864526/locale-keeps-resetting-between-switching-pages-nuxt-i18n

Answer 1

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>