Setup i18n

hasanakg · itamargiv · commit 3c8c6dfd8027 · 2023-11-03T13:41:24.000+01:00
diff --git a/resources/js/app.ts b/resources/js/app.ts
@@ -1,28 +1,31 @@
 import './bootstrap';
-import i18n from 'vue-banana-i18n';
 import { createStore } from './store';
-import i18nMessages from './lib/i18n';
 import {createApp, h} from 'vue';
 import {createInertiaApp} from '@inertiajs/inertia-vue3';
+import i18nMessages, { I18nMessages } from './lib/i18n';
+import {createI18n} from 'vue-banana-i18n'
 import bubble from './lib/bubble';
 import Error from './Pages/Error.vue';
 import Layout from './Pages/Layout.vue';
 
 Vue.use(bubble);
 
 // Retrieve i18n messages and setup the Vue instance to handle them.
-async function setupI18n(locale: string): Promise<void>{
-    const messages = await i18nMessages(locale);
-    Vue.use(i18n, { locale, messages });
+async function setupI18n(locale: string): Promise<I18nMessages>{
+    return await i18nMessages(locale);
 }
 
 // Only bootstrap inertia if setup is successful. Display generic error
 // component otherwise
 (async () => {
     try {
-        await setupI18n(document.documentElement.lang);
         const store = createStore();
-
+        const locale = document.documentElement.lang;
+        const i18nMessages = await setupI18n(locale);
+        const i18nPlugin = createI18n({
+            locale: locale,
+            messages: i18nMessages
+        });
         createInertiaApp({
             resolve: name => {
                 const page = require(`./Pages/${name}`).default;
@@ -35,6 +38,7 @@ async function setupI18n(locale: string): Promise<void>{
                 createApp({
                     render: () => h(app, props)
                 })
+                    .use(i18nPlugin)
                     .use(plugin)
                     .mount(el)
             }
diff --git a/resources/js/lib/i18n.ts b/resources/js/lib/i18n.ts
@@ -1,6 +1,6 @@
 import axios from 'axios';
 
-interface I18nMessages {
+export interface I18nMessages {
     [lang: string]: {
         [key: string]: string
     }

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`import axios from 'axios';`
`2`	`2`
`3`		`-interface I18nMessages {`
	`3`	`+export interface I18nMessages {`
`4`	`4`	`[lang: string]: {`
`5`	`5`	`[key: string]: string`
`6`	`6`	`}`