Categories
javascript vue-i18n vue.js vuejs3

How to import multiple locale json files in Vue 3 + i18n?

This is my code, that works without problems:

import { createI18n } from 'vue-i18n'
import messages from './components/json/foo/foo_messages.json'
const app = createApp(App)
installI18n(app)
const i18n = createI18n({
locale: 'ru',
messages
})
app
.use(i18n)
.use(vuetify)
.mount('#app')

Now I need to load messages also from ./components/json/bar/bar_messages.json. I tried to do this way:

import { createI18n } from 'vue-i18n'
import foo_msg from './components/json/foo/foo_messages.json'
import bar_msg from './components/json/bar/bar_messages.json'
const app = createApp(App)
installI18n(app)
const i18n = createI18n({
locale: 'ru',
messages: {foo_msg, bar_msg}
})
app
.use(i18n)
.use(vuetify)
.mount('#app')

But it didn’t work. Could anyone say how to do it?

EDIT: This is my foo json file

{
"ru": {
"header": {
"hello": "Привет"
}
},
"en": {
"header": {
"hello": "Hello"
}
}
}

and this is bar json file

{
"ru": {
"footer": {
"bye": "Пока"
}
},
"en": {
"footer": {
"bye": "Goodbye"
}
}
}