I18n-module: Reload of JSON language files

Created on 5 Mar 2018  路  7Comments  路  Source: nuxt-community/i18n-module

I store translations in JSON files and configure nuxt-i18n like this:

    ['nuxt-i18n', {
      locales: [locale.language],
      vueI18n: {
        messages: {
          [locale.code]: require('./locales/' + locale.code + '.json')
        }
      },
      defaultLocale: locale.code
    }]

My use case is that I use nuxt generate to generate separate sites for all languages that are served from different domains, so I only specify one language per build.

The problem I'm facing is that changes to ./locales/.json are only visible in the app after I restart the dev server.

Having

    watch: [
      '~/locales'
    ],

in nuxt.config.js does cause the page to reload when I save locales files, but the changes are not visible.

Any thoughs on this?

This question is available on Nuxt.js community (#c28)
picture katafractari

Most helpful comment

using lazy-load-translations to reload the translations.

 [ 'nuxt-i18n',
      {
        locales: [
          {
            code: 'en',
            name: 'English',
            file: 'en-US.js',
          },
        ],
        lazy: true,
        langDir: 'locales/',
      }
]

// locales/en-US.js
export default require('./en.json')
picture nghiepit on 15 Jun 2018
👍5 🎉2 🚀1 ❤1

All 7 comments

I am having the same problem, my use case is that I don't want to restart dev server everytime I change my translatin file (e.g. en.json or en.js)

mohanklein picture mohanklein on 20 Apr 2018

I use the express template for my projects and I change the srcDir to client/:

// nuxt.config.js

module.exports = {
  /**
   * Source directory
   */
  srcDir: 'client/',
}

All the translations are located in client/lang/. With this setup, the translation files are _watched_ properly but any change triggers a full restart of the dev server. Not perfect but at least I don't have to manually restart the server. I'm not sure how HMR might be implemented for translation files but it would be a really nice feature!

paulgv picture paulgv on 20 Apr 2018
👍1

I'm currently using nodemon for this purpouse. Of course a full restart of the dev server is still needed to reload the translations.

package.json

{
  "scripts": {
    "dev": "nodemon --watch locales --watch config --exec \"cross-env NODE_ENV=development LOCALE=en nuxt\""
  }
}
katafractari picture katafractari on 20 Apr 2018
👍1

using lazy-load-translations to reload the translations.

 [ 'nuxt-i18n',
      {
        locales: [
          {
            code: 'en',
            name: 'English',
            file: 'en-US.js',
          },
        ],
        lazy: true,
        langDir: 'locales/',
      }
]

// locales/en-US.js
export default require('./en.json')
nghiepit picture nghiepit on 15 Jun 2018
👍5 🎉2 🚀1 ❤1

This question has been resolved by @nghiepit, see answer.

cmty[bot] picture cmty[bot] on 12 Aug 2018

Hi @nghiepit Could you share what your en.json looks like?
Thanks

awakash picture awakash on 25 Oct 2018

Nevermind, en.json can look like
{ "breaking": "BREAKING", "stop": "stop this from happening." }

awakash picture awakash on 25 Oct 2018
Was this page helpful?
0 / 5 - 0 ratings

Related issues

manniL picture manniL  路  24Comments
fanwenfu picture fanwenfu  路  15Comments
albanm picture albanm  路  20Comments
NadhirBoukhenifra picture NadhirBoukhenifra  路  30Comments
thariddler picture thariddler  路  23Comments