How to use multiple files per language with vue-i18n in vue?

Question

I am new to vue and I am using vuetify. I want to add internationalization to my project. I succeeded in that but I am using the standard method in which we make a single file per language, as my project grows it will be very hard to maintain that file. So I want to breakdown that single file into multiple files for a single language. Can anyone suggest how to do that?

Answer 1

This is an old question, but I had the same question and found a solution I want to share. I hope this is helpfull.

My original language file "index.js" looked like this:

export default {
    "ok" : "OK",
    "cancel" : "Abbrechen",
    "back" : "Zurück",
    "yes" : "Ja",
    "no" : "Nein"
    ....
}

I've splitted the content into two new files and named them "mainview.js" and "badges.js". They are in the same directory as the original language file.

My languagefile "index.js" now only imports all other files and looks like this:

// import each language file
import mainview from './mainview'
import badges from './badges'

// add all imported language files
export default {
  ...mainview,
  ...badges,
}

Answer 2

If you use the plugin (vue add i18n), you'll get a i18n.js file in your src/ folder. Change the line in loadLocaleMessages from:

messages[locale] = locales(key)

to

messages[locale] = {...messages[locale], ...locales(key)}

and you can have multiple files per language, e.g. de.menu.json, de.text.json, etc. The function will just load the translations from all files that start with locale name and end with .json.

I've written a bit longer text here https://medium.com/@robert.spendl/vue-i18n-translations-in-multiple-files-96a116017d89 but it's basically just about changing this one line.