Multiple translations files per language with vue-i18n and nuxtjs

Question

I use nuxtjs and i18n to build a static website with multiple languages. At the moment I have one json file per language. For better structure i want to split the file in multiple files per language. How can i do that? Is there a way where i can tell i18n explicit which json file it should use for a page? Or do I have to concatenatet the jsons files to one?

I used this exmaple to build my translations https://nuxtjs.org/examples/i18n/

Arching

Did you find a solution for this? – Abominable

Answer 1

// i18n.js plugin
import Vue from 'vue'
import VueI18n from 'vue-i18n'

Vue.use(VueI18n)

export default ({ app, store }) => {
  app.i18n = new VueI18n({
    locale: store.state.locale,
    fallbackLocale: 'en-US',
    messages: {
      en: Object.assign({}, require('~/locales/en.json'), require('~/locales/en.settings.json')),
      tr: Object.assign({}, require('~/locales/tr.json'), require('~/locales/tr.settings.json')),
    },
    silentTranslationWarn: true,
  })
}

Hose

Answer 2

Late reply, but I have the exact same needs :) Only work-around I have so far is to use the in-component feature of NuxtI18n

As shown in the doc :

<script setup lang="ts">
const { t } = useI18n({
  useScope: 'local'
})
</script>

<template>
  <p>{{ t('hello') }}</p>
</template>

<i18n lang="json">
{
  "en": {
    "hello": "hello world!"
  },
  "ja": {
    "hello": "こんにちは、世界!"
  }
}
</i18n>

It should at least only render with the page, but is not taking advantage of file structure, so it's a meh solution, but it is what I have got... I would love to hear if you got a solution !

Santoro