Nuxt i18n doesn't translate properly while switch lang

3.3k Views Asked by At

I have a site on nuxtjs, there I use nuxt-i18n with two languages setup, english as a default lang. If I set second language and refresh a page (f5), an issue occur when I try to switch language back to default. But it looks fine with second language. enter image description here

There are many error in console like

[vue-i18n] Value of key 'auth.logout' is not a string! vue-i18n.esm.js:33
[vue-i18n] Cannot translate the value of keypath 'auth.logout'. Use the value of keypath as default. vue-i18n.esm.js:33
[vue-i18n] Value of key 'appbar.sorting.label' is not a string! vue-i18n.esm.js:33
[vue-i18n] Cannot translate the value of keypath 'appbar.sorting.label'. Use the value of keypath as default. vue-i18n.esm.js:33
[vue-i18n] Value of key 'appbar.sorting.create_asc' is not a string! vue-i18n.esm.js:33
[vue-i18n] Cannot translate the value of keypath 'appbar.sorting.create_asc'. Use the value of keypath as default. vue-i18n.esm.js:33
[vue-i18n] Value of key 'appbar.sorting.create_desc' is not a string! vue-i18n.esm.js:33

Also if I load the page with default language and then switch to the second lang, all work fine.

For switching languages I use a component.

<template>
  <v-row>
    <v-col cols="auto" id="language">
      <v-select
        v-model="current_language"
        dense
        :items="languages"
        item-value="code"
        item-text="name"
        max-width="10"
      >
        <template v-slot:selection="{ item }">
          <v-img :src="item.flag" max-height="32" max-width="32"></v-img>
          <span class="ml-3">{{ item.name }}</span>
        </template>
        <template v-slot:item="{ item }">
          <v-img :src="item.flag" max-height="32" max-width="32"></v-img>
          <span class="ml-3">{{ item.name }}</span>
        </template>
      </v-select>
    </v-col>
  </v-row>
</template>

<script>
export default {
  props: ["instant"],
  data() {
    return {
      current_language: this.$i18n.locale,
      languages: [
        {
          name: "English",
          code: "en",
          flag: "/img/usa-flag.png"
        },
        {
          name: "Russian",
          code: "ru",
          flag: "/img/russia-flag.png"
        }
      ]
    };
  },
  watch: {
    current_language(val) {
      if (typeof this.instant != "undefined") {
        this.$router.push({ path: this.switchLocalePath(val) });
      }
    }
  },
  methods: {
    save() {
      this.$router.push({ path: this.switchLocalePath(this.current_language) });
    }
  }
};
</script>
0

There are 0 best solutions below