Nuxt•8mo ago

Reserved Keywords in i18n ?

Hello, I'm using Nuxt 2.15 with Vue2 in a bit old project, and I'm finding an issue with my i18n plugin, my config look like that :

i18n: {
    locales: [
      { code: 'en', iso: 'en', name: 'English', file: 'en.js', dir: 'ltr' },
      { code: 'fr', iso: 'fr', name: 'Français', file: 'fr.js', dir: 'ltr' },
      { code: 'deutsch', iso: 'de', name: 'Deutsch', file: 'de.js', dir: 'ltr' },
    ],
    defaultLocale: 'fr',
    strategy: 'prefix_except_default',
    lazy: true,
    langDir: './lang',
    vueI18n: {
      fallbackLocale: 'fr',
    },
  },

i18n: {
    locales: [
      { code: 'en', iso: 'en', name: 'English', file: 'en.js', dir: 'ltr' },
      { code: 'fr', iso: 'fr', name: 'Français', file: 'fr.js', dir: 'ltr' },
      { code: 'deutsch', iso: 'de', name: 'Deutsch', file: 'de.js', dir: 'ltr' },
    ],
    defaultLocale: 'fr',
    strategy: 'prefix_except_default',
    lazy: true,
    langDir: './lang',
    vueI18n: {
      fallbackLocale: 'fr',
    },
  },

Everythings work well with this configuration for German language but when I set the normal code 'de' it doesnt work for all my pages that start with de, for example /deals /deals/:id etc.. It goes to my fallback which is french. If I switch the language directly from this page, it works correctly but when I'm navigating to it it just fallback and go /deals instead of /de/deals. I don't have any /de files that might conflict, I'm a bit new to Nuxt so maybe I missed something ? Thanks

7 Replies

pyplacca•8mo ago

Check if the links that point to those pages are formatted correctly using the localePath API method?

TTOP•8mo ago

<template>
  <Select v-model="$root.$i18n.locale" @change="changeLocaleRoute" variant="primary">
    <option v-for="locale in $i18n.locales" :key="locale.iso" :value="locale.code">{{ locale.name }}</option>
  </Select>
</template>

<script>
export default {
  methods: {
    changeLocaleRoute() {
      const newLocale = this.$root.$i18n.locale;
      this.$nextTick(() => {
        let newPath = this.localePath(this.$route.fullPath, newLocale);
        if (newLocale === this.$i18n.defaultLocale) {
          newPath = newPath.replace(`/${newLocale}`, '');
        }
        
        this.$store.commit('setLocale', newLocale);
        sessionStorage.setItem('locale', newLocale); 
        
        if (newPath !== this.$route.fullPath) {
          window.location = newPath;
        }
      });
    },

  } 
};
</script>

<template>
  <Select v-model="$root.$i18n.locale" @change="changeLocaleRoute" variant="primary">
    <option v-for="locale in $i18n.locales" :key="locale.iso" :value="locale.code">{{ locale.name }}</option>
  </Select>
</template>

<script>
export default {
  methods: {
    changeLocaleRoute() {
      const newLocale = this.$root.$i18n.locale;
      this.$nextTick(() => {
        let newPath = this.localePath(this.$route.fullPath, newLocale);
        if (newLocale === this.$i18n.defaultLocale) {
          newPath = newPath.replace(`/${newLocale}`, '');
        }
        
        this.$store.commit('setLocale', newLocale);
        sessionStorage.setItem('locale', newLocale); 
        
        if (newPath !== this.$route.fullPath) {
          window.location = newPath;
        }
      });
    },

  } 
};
</script>

This is how I switch languages, I refresh one time my application to load the new language, when I console.log the locale its the good one. It seems like there is a conflict because of the name 'de' and 'deals' because it retrieve my content in french as well, so its the whole page that is in french (translation) + the content (I pass the variable i18n.locale), when I switch page from the bugged one, I still have my /de before my other pages, so its related to this page only. What is weird is that if I switch the languages from the /deals page, it refresh and show me well the /de/deals with the good translation and content so I guess it is not my translation file the problem.. Not sure if I understand your question ?

pyplacca•8mo ago

Which version of nuxt i18n are you using? I tried to reproduce your issue on my end, but it works fine. No issues. I’m on version 7.3.1

pyplacca•8mo ago

I think you should also consider refactoring the logic for switching locales and use the available API that the module provides

@nuxtjs/i18n

Lang Switcher

TTOP•8mo ago

"@nuxtjs/i18n": "^7.2.2"

"@nuxtjs/i18n": "^7.2.2"

I will try refactoring the logic I think ! Thanks

pyplacca•8mo ago

Also works fine with your version 7.2.2

TTOP•8mo ago

Alright I'll refacto the logic

Gaming

Programming

Reserved Keywords in i18n ?