I18n-module: Lazy loading for locales list

Created on 22 Mar 2019 · 10Comments · Source: nuxt-community/i18n-module

What problem does this feature solve?

In some cases, there's a need for a dynamic locales list (i.e. localizations created by editor on CMS). Currently, locales only allows a static array.

What does the proposed changes look like?

To allow dynamic locales listing, locales should allow functions as well, including those returning a Promise.

_{This feature request is available on Nuxt community (#c217)}

feature-request pinned 📌

Source

tasiek

❤2

Most helpful comment

found a solution

nuxt.config.js
defaults is just a normal nuxt config obj

export default async () => {
  const url = `${process.env.BASE_URL}/translation/languages`
  const { data: response } = await axios.get(url)
  const locales = response.data.map(lang => {
    return {
      ...lang,
      file: `${lang.code}.json`
    }
  })

  defaults.i18n.locales = locales

  return defaults
}

//e i forgot that every languages needs a file which returns content or a promise :/

cannap on 25 Jun 2019

👍2

All 10 comments

What status for this request?

zyrianov-v-fd on 27 May 2019

i need this also or is there a way to manipulate via module

export default function lang () {
  /**
   locales: [
      {
        code: 'en',
        iso: 'en-US',
        name: 'English',
        file: 'en.json'
      },
      {
        code: 'de',
        iso: 'de-DE',
        name: 'Deutsch',
        file: 'de.json'
      }
    ],
  */
  this.options.i18n.locales = [
    {
      code: 'en',
      iso: 'en-US',
      name: 'English',
      file: 'en.json'
    },
    {
      code: 'de',
      iso: 'de-DE',
      name: 'Deutsch',
      file: 'de.json'
    }
  ]
}

i tried but i it seems not working

cannap on 21 Jun 2019

found a solution

nuxt.config.js
defaults is just a normal nuxt config obj

export default async () => {
  const url = `${process.env.BASE_URL}/translation/languages`
  const { data: response } = await axios.get(url)
  const locales = response.data.map(lang => {
    return {
      ...lang,
      file: `${lang.code}.json`
    }
  })

  defaults.i18n.locales = locales

  return defaults
}

//e i forgot that every languages needs a file which returns content or a promise :/

cannap on 25 Jun 2019

👍2

This is also necessary for pages. I am using Wordpress as a headless CMS and I made an endpoint that returns the sites structure. This would help me add and remove pages from CMS.

Currently I can work with the solution provided by cannap, but when the pages and locales options would allow functions this plugin would be perfect ❤️.

sven-ra on 13 Aug 2019

@cannap
Thank you very mutch to share your information about this topic and also your answer.
Really i think this is my answer too, But i don't know where can i use this in my code, i mean which part of my code i have to put it?