Set up i18n

.gitignore

@@ -21,4 +21,5 @@ npm-debug.log
 yarn-error.log
 /.fleet
 /.idea
-/.vscode
+/.vscode
+/resources/lang/php_*.json

package-lock.json

@@ -12,6 +12,7 @@
                 "bulma-checkradio": "^2.1.3",
                 "bulma-switch": "^2.0.4",
                 "laravel-vite-plugin": "^0.8.0",
+                "laravel-vue-i18n": "^2.7.1",
                 "pinia": "^2.1.6",
                 "sass": "^1.67.0",
                 "vite": "^4.4.9",
@@ -934,6 +935,16 @@
                 "vite": "^3.0.0 || ^4.0.0"
             }
         },
+        "node_modules/laravel-vue-i18n": {
+            "version": "2.7.1",
+            "resolved": "https://registry.npmjs.org/laravel-vue-i18n/-/laravel-vue-i18n-2.7.1.tgz",
+            "integrity": "sha512-Q2pTb5dUL5dD1FWnJf37myunRECcyLY+k/sQSDQlozsbda8AL7evc17lwdz2nkSSw7jgBRq1UswWBy0tPo5QCA==",
+            "dev": true,
+            "dependencies": {
+                "php-parser": "3.1.3",
+                "vue": "^3.2.45"
+            }
+        },
         "node_modules/magic-string": {
             "version": "0.30.3",
             "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.3.tgz",
@@ -994,6 +1005,12 @@
                 "node": ">=0.10.0"
             }
         },
+        "node_modules/php-parser": {
+            "version": "3.1.3",
+            "resolved": "https://registry.npmjs.org/php-parser/-/php-parser-3.1.3.tgz",
+            "integrity": "sha512-hPvBmnRYPqWEtMfIFOlyjQv1q75UUtxt4U+YscKIQViGmEE2Xa4BuS1B1/cZdjy7MVcwtnr0WkEsr915LgRKOw==",
+            "dev": true
+        },
         "node_modules/picocolors": {
             "version": "1.0.0",
             "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",

package.json

@@ -13,6 +13,7 @@
         "bulma-checkradio": "^2.1.3",
         "bulma-switch": "^2.0.4",
         "laravel-vite-plugin": "^0.8.0",
+        "laravel-vue-i18n": "^2.7.1",
         "pinia": "^2.1.6",
         "sass": "^1.67.0",
         "vite": "^4.4.9",

resources/js_vue3/app.js

@@ -1,6 +1,7 @@
 import '/resources/js_vue3/assets/app.scss'; 
 
 import { createApp } from 'vue'
+import { i18nVue } from 'laravel-vue-i18n'
 // import { createPinia } from 'pinia'
 
 import App from './App.vue'
@@ -20,6 +21,12 @@ app.config.globalProperties.$2fauth = {
 
 // app.use(createPinia())
 app.use(router)
+app.use(i18nVue, {
+    resolve: async lang => {
+        const langs = import.meta.glob('../lang/*.json');
+        return await langs[`../lang/${lang}.json`]();
+    }
+})
 app.use(Notifications)
 
 app.mount('#app')

vite.config.js

@@ -1,6 +1,7 @@
 import { defineConfig } from 'vite';
 import laravel from 'laravel-vite-plugin';
 import vue from '@vitejs/plugin-vue';
+import i18n from 'laravel-vue-i18n/vite';
 
 export default defineConfig({
     plugins: [
@@ -25,6 +26,7 @@ export default defineConfig({
                 },
             },
         }),
+        i18n('resources/lang'),
     ],
     resolve: {
         alias: {