Add function to load languages dynamically

src/i18n.js

@@ -25,3 +25,19 @@ export const i18n = createI18n({
     fallbackLocale: fallbackLocale,
     messages: {}
 });
+
+const loadedLanguages = new Set();
+
+export async function loadLanguage (locale) {
+    if (loadedLanguages.has(locale)) {
+        i18n.global.locale.value = locale;
+        return;
+    };
+
+    const messages = (await import(`./locales/${locale}.json`)).default;
+
+    i18n.global.setLocaleMessage(locale, messages);
+    i18n.global.locale.value = locale;
+
+    loadedLanguages.add(locale);
+};

src/main.js

@@ -16,11 +16,14 @@ limitations under the License.
 
 import { createApp } from 'vue'
 import App from './App.vue'
-import { i18n } from './i18n';
+import { i18n, loadLanguage } from './i18n';
+import getCurrentLanguage from './utils/currentLanguage';
 import router from './router'
 import './styles/common.css'
 import './styles/variables/colors.css'
 
+await loadLanguage(getCurrentLanguage());
+
 createApp(App)
     .use(router)
     .use(i18n)