Multiple i18n Translation Files

btmi

Is there any way to have more than 1 file containing translations strings for each language?

At the moment I have 1 index.js file for each translation, but I would like to break these into smaller files to separate, for example, strings that never change (like country names) with those that are more likely to change due to changes in the interface, resulting in having both an index.js and static.js file for each language.

Is that possible?

ssuess

There are several workarounds that allow this, depending on what you want to do. I have several files that I combine inside the /src/i18n/index.js file to produce the file that the app eventually uses:

import en from './en-gb/index.json'
import es from './es/index.json'
import ar from './ar/index.json'
import ru from './ru/index.json'
import fr from './fr/index.json'
import fa from './fa/index.json'
import it from './it/index.json'
import tr from './tr/index.json'
import enstrings from './en-gb/strings.json'
import esstrings from './es/strings.json'
import arstrings from './ar/strings.json'
import rustrings from './ru/strings.json'
import frstrings from './fr/strings.json'
import fastrings from './fa/strings.json'
import itstrings from './it/strings.json'
import trstrings from './tr/strings.json'

const enCombined = Object.assign({}, en, enstrings)
const esCombined = Object.assign({}, es, esstrings)
const arCombined = Object.assign({}, ar, arstrings)
const ruCombined = Object.assign({}, ru, rustrings)
const frCombined = Object.assign({}, fr, frstrings)
const faCombined = Object.assign({}, fa, fastrings)
const itCombined = Object.assign({}, it, itstrings)
const trCombined = Object.assign({}, tr, trstrings)

export default {
  'en-gb': enCombined,
  es: esCombined,
  ar: arCombined,
  ru: ruCombined,
  fr: frCombined,
  fa: faCombined,
  it: itCombined,
  tr: trCombined
}

The above is just for all the system wide strings, I further have a set of components that are translated individually (using weblate and then via webhooks checked into my repo), and these I then have a script combine (merging all langs for the particular component) and then import the resulting file with the i18n-loader (https://github.com/intlify/vue-i18n-loader) into each component. It was a little fiddly to set up initially, but now it all works great.

btmi

@ssuess That is just what I needed…thank you!