Блог

У меня есть сайт на nuxtjs, там я использую nuxt-i18n с настройкой двух языков, английский язык по умолчанию. Если я устанавливаю второй язык и обновляю страницу (f5), возникает проблема при попытке переключить язык обратно на стандартный. Но со вторым языком все выглядит нормально.

В консоли много ошибок, таких как

 [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
  

Также, если я загружу страницу с языком по умолчанию, а затем переключусь на второй язык, все будет работать нормально.

Для переключения языков я использую компонент.

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