Skip to content

Commit

Permalink
Refactor VueI18n creation to own module
Browse files Browse the repository at this point in the history
This refactors the creation of the VueI18n
instance by encapsulating in an own ES module.
So the i18n instance can be imported to other pure
ES modules and will allow internationalization.
  • Loading branch information
chrismayer committed May 2, 2024
1 parent cda4d70 commit 61b03a4
Show file tree
Hide file tree
Showing 2 changed files with 24 additions and 19 deletions.
18 changes: 18 additions & 0 deletions src/locales/wgu-i18n.js
Original file line number Diff line number Diff line change
@@ -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);
25 changes: 6 additions & 19 deletions src/main.js
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand All @@ -17,7 +16,6 @@ import axios from 'axios';

Vue.use(Vuetify);
Vue.use(PortalVue);
Vue.use(VueI18n);

require('./assets/css/wegue.css');

Expand Down Expand Up @@ -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.
*
Expand Down Expand Up @@ -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');
};
Expand Down

0 comments on commit 61b03a4

Please sign in to comment.