Multilingual site on Nuxt + Laravel with locales from backend

Question

I am making a multilingual site on Nuxt + Laravel. I want to have an option to set locales in the database and share these locales to Nuxt front. Is it possible?

I found Nuxt plugin nuxt-i18n which looks good, but locales are set in nuxt.config.js file and you cannot set data from api response in this file.

score 6 · Answer 1 · edited Feb 10 '21 at 09:19

You can use the Lazy-load translations in nuxt-i18n

First, create a structure for languages similar to this:

nuxt-project/
├── lang/
│   ├── en-US.js
│   ├── es-ES.js
│   ├── fr-FR.js
├── nuxt.config.js

Then set the nuxt.config configuration. Note that you need to set lazy: true and the langDir

// nuxt.config.js

['nuxt-i18n', {
  locales: [
    {
      code: 'en',
      file: 'en-US.js'
    },
    {
      code: 'es',
      file: 'es-ES.js'
    },
    {
      code: 'fr',
      file: 'fr-FR.js'
    }
  ],
  lazy: true,
  langDir: 'lang/'
}]

Then, inside the lang files you can call your API and return the json with the translation messages, like this:

// lang/[lang].js

export default (context) => {
  return new Promise(function (resolve) {
    //Call your API and resolve the content here
    resolve({
      //The JSON return from your API
    })
  });
}

You can find more details in the documentation

Lack of example but gave a clue, somehow this: https://stackoverflow.com/questions/62529529/accessing-app-context-from-custom-js-files-for-fetching-locale-messages might help — Osify, Feb 09 '21 at 18:34

score 1 · Answer 2 · answered Feb 10 '21 at 12:24

Base on this answer: https://stackoverflow.com/a/62534495/889126

I have done as

export default async function (context) {
  // axios is derived directly from lib instead of context
  const axios = require('axios').default;

  let localeMessages = null

  await axios.get(
    'http://127.0.0.1:8000/api/js/lang-km.json'
  ).then((result) => {
    localeMessages = result.data
  }).catch(() => {
    localeMessages = {}
  });

  return localeMessages
}

It's working, you can display on console and also on your NuxtJS app:

Remark: the API I response as JSON string, you can use any prefix, I just made as: /api/js/lang-km.json (just a name)

Multilingual site on Nuxt + Laravel with locales from backend

2 Answers2

Linked