From e87c80eee14856a0001c3734394a461e62f09aa8 Mon Sep 17 00:00:00 2001
From: Kailash Nadh <kailash@nadh.in>
Date: Tue, 1 Mar 2022 22:23:54 +0530
Subject: [PATCH] Refactor app init routines to load config/i18n before main
 app mount.

Move config/language loading outside the main Vue() instance mount
as the app dependencies require i18n before they are mounted.

This commit moves config/language loading outside the app routines
to plain API calls, which on success, initialize and mount the main
view App instance.
---
 frontend/src/main.js | 47 +++++++++++++++++++++++++-------------------
 1 file changed, 27 insertions(+), 20 deletions(-)

diff --git a/frontend/src/main.js b/frontend/src/main.js
index e78ab089..b9705843 100644
--- a/frontend/src/main.js
+++ b/frontend/src/main.js
@@ -15,9 +15,7 @@ const i18n = new VueI18n();
 Vue.use(Buefy, {});
 Vue.config.productionTip = false;
 
-// Globals.
-Vue.prototype.$utils = new Utils(i18n);
-Vue.prototype.$api = api;
+
 
 // Setup the router.
 router.beforeEach((to, from, next) => {
@@ -30,12 +28,13 @@ router.beforeEach((to, from, next) => {
 
 router.afterEach((to) => {
   Vue.nextTick(() => {
-    const t = to.meta.title ? `${i18n.tc(to.meta.title, 0)} /` : '';
+    const t = to.meta.title && i18n.te(to.meta.title) ? `${i18n.tc(to.meta.title, 0)} /` : '';
     document.title = `${t} listmonk`;
   });
 });
 
-new Vue({
+
+const v = new Vue({
   router,
   store,
   i18n,
@@ -45,20 +44,28 @@ new Vue({
     isLoaded: false,
   },
 
-  methods: {
-    loadConfig() {
-      api.getServerConfig().then((data) => {
-        api.getLang(data.lang).then((lang) => {
-          i18n.locale = data.lang;
-          i18n.setLocaleMessage(i18n.locale, lang);
-          this.isLoaded = true;
-        });
-      });
-    },
+  mounted() {
+    v.isLoaded = true;
   },
+});
 
-  created() {
-    this.loadConfig();
-    api.getSettings();
-  },
-}).$mount('#app');
+
+// Load server side config and language before mounting the app.
+api.getServerConfig().then((data) => {
+  api.getLang(data.lang).then((lang) => {
+    i18n.locale = data.lang;
+    i18n.setLocaleMessage(i18n.locale, lang);
+
+    Vue.prototype.$utils = new Utils(i18n);
+    Vue.prototype.$api = api;
+
+    // Set the page title after i18n has loaded.
+    const to = router.history.current;
+    const t = to.meta.title ? `${i18n.tc(to.meta.title, 0)} /` : '';
+    document.title = `${t} listmonk`;
+
+    v.$mount('#app');
+  });
+});
+
+api.getSettings();