diff --git a/src/locales/wgu-i18n.js b/src/locales/wgu-i18n.js new file mode 100644 index 00000000..f5883ec1 --- /dev/null +++ b/src/locales/wgu-i18n.js @@ -0,0 +1,18 @@ +/** + * Creates the VueI18n object used for internationalization. + */ +import Vue from 'vue'; +import VueI18n from 'vue-i18n'; +import LocaleUtil from '@/util/Locale'; + +Vue.use(VueI18n); + +const appConfig = Vue.prototype.$appConfig; + +const preset = { + locale: LocaleUtil.getPreferredLanguage(appConfig), + fallbackLocale: LocaleUtil.getFallbackLanguage(appConfig), + messages: LocaleUtil.importVueI18nLocales() +}; + +export const i18n = new VueI18n(preset); diff --git a/src/main.js b/src/main.js index 29e696cf..11f7ddda 100644 --- a/src/main.js +++ b/src/main.js @@ -3,7 +3,6 @@ import Vue from 'vue'; import Vuetify from 'vuetify/lib/framework'; import PortalVue from 'portal-vue' -import VueI18n from 'vue-i18n'; import 'roboto-fontface/css/roboto/roboto-fontface.css' import '@mdi/font/css/materialdesignicons.css' import 'material-icons/iconfont/material-icons.css' @@ -17,7 +16,6 @@ import axios from 'axios'; Vue.use(Vuetify); Vue.use(PortalVue); -Vue.use(VueI18n); require('./assets/css/wegue.css'); @@ -62,21 +60,6 @@ const createVuetify = function (appConfig) { return new Vuetify(preset); } -/** - * Creates the VueI18n object used for internationalization. - * - * @param {Object} appConfig Global application context. - * @returns The active I18n instance. - */ -const createVueI18n = function (appConfig) { - const preset = { - locale: LocaleUtil.getPreferredLanguage(appConfig), - fallbackLocale: LocaleUtil.getFallbackLanguage(appConfig), - messages: LocaleUtil.importVueI18nLocales() - }; - return new VueI18n(preset); -} - /** * Backwards compatibility layer for legacy features in app-conf.json. * @@ -181,13 +164,17 @@ const migrateAppConfig = function (appConfig) { * * @param {Object} appConfig Global application context. */ -const createApp = function (appConfig) { +const createApp = async function (appConfig) { // make app config accessible for all components Vue.prototype.$appConfig = migrateAppConfig(appConfig); + // dynamic import, otherwise Vue.prototype.$appConfig won't be set yet on + // static import + const { i18n } = await import('./locales/wgu-i18n.js'); + new Vue({ vuetify: createVuetify(appConfig), - i18n: createVueI18n(appConfig), + i18n, render: h => h(WguApp) }).$mount('#app'); }; diff --git a/tests/unit/specs/util/Locale.spec.js b/tests/unit/specs/util/Locale.spec.js index b557a173..e9cd931c 100644 --- a/tests/unit/specs/util/Locale.spec.js +++ b/tests/unit/specs/util/Locale.spec.js @@ -1,4 +1,5 @@ import LocaleUtil from '@/util/Locale' +import Vue from 'vue'; const appConfig = { lang: { @@ -11,6 +12,8 @@ const appConfig = { } }; +Vue.prototype.$appConfig = appConfig; + describe('LocaleUtil', () => { it('is defined', () => { expect(typeof LocaleUtil).to.not.equal(undefined);