3

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>
NashGC
  • 659
  • 8
  • 17
  • I assume there must be some error message somewhere? I mean: 1. it either does what you want (which is not the case), 2. it fails (should give you an error) 3. or it is just never executed... Could it be the third case? Also I see that your `save` method does not appear in the the template... Also: ` If I set second language and refresh a page (f5)` how do you set it? do you change the `default` in your code, do you call another url like `mypage.com/fr/...` or how do you do that? – Merc Sep 06 '20 at 18:24
  • I'm not sure you're supposed to use `switchLocalePath` this way. In the [docs](https://i18n.nuxtjs.org/basic-usage/#nuxt-link) they use a pretty simple link `English` in the lang switcher. Give it a try! – Bruno Martins Sep 07 '20 at 08:04
  • @Merc, hi! Really now I see error in console, but it doesn't give me any clue. When I set language (btw, I set it by call the save method from parent component via refs) I get errors (see udp. post) – NashGC Sep 07 '20 at 13:26
  • @bmartins, I can't figure out how to integrate it with select. – NashGC Sep 07 '20 at 13:30
  • Well it seems that you don't have all your strings translated: http://kazupon.github.io/vue-i18n/guide/fallback.html#explicit-fallback-with-one-locale When switching the language, which is probably working, the app does not have any valid translations and is falling back to the default language,as said in the console. Can you check your translations (maybe they are within nuxt-config: https://i18n.nuxtjs.org/basic-usage/ or you defined files: https://i18n.nuxtjs.org/options-reference#locales). – Merc Sep 10 '20 at 21:00

0 Answers0