How to store Translations in Files? and force UTF-8 loading?

[NadhirBoukhenifra]

Hello,
thank you for this awesome plugin :)

i have some Questions:

1. How to store Translations in Files, like locales/en.json and loacales/fr.json?

both of Messages and Routes! in separate files.

module.exports = {
  modules: [
    ['nuxt-i18n', {
      locales: [
        {
          code: 'en',
          iso: 'en-US',
          name: 'English'
        },
        {
          code: 'fr',
          iso: 'fr-FR',
          name: 'Français'
        }
      ],
      defaultLocale: 'en',
      vueI18n: {
        messages: {
          fr: {
            home: 'Accueil',
            about: 'À propos',
            category: 'Catégorie'
          },
          en: {
            home: 'Homepage',
            about: 'About us',
            category: 'Category'
          }
        },
        fallbackLocale: 'en'
      },
      routes: {
        about: {
          fr: '/a-propos',
          en: '/about-us'
        },
        category: {
          fr: '/categorie'
        },
        'category-slug': {
          fr: '/categorie/:slug'
        }
      }
    }]
  ]
}

2. i have published an issues in vue-i18n repo,
   Force UTF-8 Encoding Route-Name (After Reloading The Path) kazupon/vue-i18n#274
   this problem appears when naming route to another language different from Latin!

the links works fine navigation, as expected.

but the real problem when try to refresh the page and the route is like this:
http://localhost:3000/cn/周有七天 or http://localhost:3000/ar/الرئيسية

the page won't load and redirect me to error 404.
try to use your plugin with this repo https://github.com/vuetifyjs/nuxt.
thank you again.

_{This question is available on Nuxt.js community (#c2)}

[paulgv]

Hi!
I’m currently AFK and won’t be able to look into the encoding issue until the end of the month, I never tried using non-Latin characters in routes before, this is very interesting :)
As for storing the modules config in a separate file, did you see the example project available here: https://github.com/paulgv/nuxt-i18n-example ?
It might give you some pointers.

[rprins]

Like @NadhirBoukhenifra, I've run into problems dealing with separate files for translations. However, instead of separating the translations and bundling them together later, like your example does, I want to only load the translations of the language of the user. The current project I'm working on could get support for a lot of languages, so it might get bloated if I load everything at once.
Could you give me some tips how to solve this?

Also +1 for non-Latin characters in routes.

Thanks for the effort you already put in this module, it helped me a lot. :)

[mikehoh]

The problem with non-latin characters still exists. Did anyone find the way how to use different languages in urls? As I've tested a lot of languages - German, French, Russian, Czech, etc.
It tries to render a page with encoded url. Then it can't to find such url in pages and we have an error.
So, nuxt-i18n has to support all languages by decoding urls before.

[mikehoh]

In addition, want to share how to fix this on a project side, but this solution looks wired.
Keep your translated urls already encoded.
Fix inside the plugin would be more nice.

pages: {
  'settings/index': {
    en: '/settings',
    cn: '/' + encodeURIComponent('设置'),
    ru: '/' + encodeURIComponent('настройки'),
    cs: '/' + encodeURIComponent('nastavení')
  }
}