Render an app with externally loaded translations

// ~/plugins/i18n.js
export default function ({ app }) {
  app.i18n.loadedLanguages = []

  app.router.beforeEach((to, from, next) => {
    loadLanguageAsync(app.i18n.locale).then(() => next())
    next() // still debugging this
  })

  async function loadLanguageAsync (lang) {
    // If the language was already loaded
    if (app.i18n.loadedLanguages.includes(lang)) {
      return Promise.resolve()
    }

    const { data } = await app.$axios.get('translate', { params: { lang } })
    app.i18n.loadedLanguages.push(lang)
    app.i18n.setLocaleMessage(lang, data.data)
    return Promise.resolve()
  }
}

// ~/nuxt.config.js
export default {
  plugins: [
    { src: '~/plugins/i18n.js' }
  ],
  modules: [
    '@nuxtjs/axios',
    'nuxt-i18n'
  ],
  i18n: {
    locales: [
      { code: 'en', iso: 'en-US', name: 'English' },
      { code: 'lv', iso: 'lv-LV', name: 'Latviešu' }
    ],
    defaultLocale: 'en',
    strategy: 'prefix',
    seo: false,
    vueI18n: {
      fallbackLocale: 'en',
      messages: {}
    }
  },
}

My main goal would be to render the page with the correct translations. I might add sligh delay while the initial language file loads or whatever, but currently this does not work well. The thing that I would like to see is that I dont have to manage translations on frontend side, nor on backend. At the moment I keep my translations in database behind backend.

I know that couple of years ago I had this thing working, but that was on Vue, and I haven’t written too much frontends till back then.

I really would like to hear some suggestions or hints how to achieve these things.

Thanks!

[rchl]

You must register the axios module after this module to make axios available.

[Rozkalns]

// nuxt.config.js
export default {
  modules: [
    'nuxt-i18n',
    '@nuxtjs/axios'
  ],
  i18n: {
    lazy: true,
    langDir: 'lang/',
    locales: [
      { code: 'en', iso: 'en-US', name: 'English', file: 'en.js' },
      { code: 'lv', iso: 'lv-LV', name: 'Latviešu', file: 'lv.js' }
    ],
    defaultLocale: 'en',
    strategy: 'prefix',
    seo: false
  }
}```

```js
// ~/lang/en.js
// ~/lang/lv.js
export default async ({ app }, locale) => {
  const { data } = await app.$axios.get('translate', { params: { locale } })
  return data.data
}

it works like a charm!

Thanks @rchl for helping out!