Vue i18N SAP multilingual best practice?

Question

I'm new to VueJS. I'm trying to make a SAP website with multilingual support. I'm using this helper plugin :

Vue-I18n

Based on this example:

vue-i18n/example/locale/src/App.vue

It works good, however how can I extend this to have the language available to multiple components (pages)? Do I really need to use a store for this, from Vuex?

Answer 1

I did the following and it works like a charm.

main.js:

import Vue from 'vue';
import router from '@/router';
import { store } from '@vue/store/index.js';
import i18n from '@vue/i18n.js'
import App from '@vue/components/App.vue';
Vue.config.productionTip = false;


new Vue({
    store,
    i18n,
    router,
    render: h => h(App),
}).$mount(`#app`);

@vue/i18n.js:

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import fr from '../json/fr.json';
import en from '../json/en.json';

Vue.use(VueI18n);

let format = function(lang) {
    let messages = {};
    lang.forEach(function(message)
    {
        messages[message.key] = message.text
    })
    return messages;
}

let populateTexts = function(lang) {
    return { ui : format(lang[8]) }
}

let conf = {
    locale: 'fr',
    fallbackLocale: 'fr',
    messages : {   
        fr: populateTexts(fr),
        en: populateTexts(en)
    }
}

const i18n = new VueI18n(conf)

export default i18n

You probably won't have the same JSON, so you won't need format and populateTexts.

Answer 2

Although it is late: 1- When using this package in a project it will be available for all components and pages. 2- Using store is not a must, but it is like data layer that all vars and data collected in and make data management easy.