feat(i18n): integrate i18next-vue plugin

package-lock.json

@@ -13,6 +13,7 @@
                 "clsx": "^2.1.1",
                 "concurrently": "^9.0.1",
                 "i18next": "^26.3.6",
+                "i18next-vue": "^5.4.0",
                 "laravel-vite-plugin": "^3.1",
                 "tailwind-merge": "^3.2.0",
                 "tailwindcss": "^4.1.1",
@@ -3987,6 +3988,16 @@
                 }
             }
         },
+        "node_modules/i18next-vue": {
+            "version": "5.4.0",
+            "resolved": "https://registry.npmjs.org/i18next-vue/-/i18next-vue-5.4.0.tgz",
+            "integrity": "sha512-GDj0Xvmis5Xgcvo9gMBJMgJCtewYMLZP6gAEPDDGCMjA+QeB4uS4qUf1MK79mkz/FukhaJdC+nlj0y1qk6NO2Q==",
+            "license": "MIT",
+            "peerDependencies": {
+                "i18next": ">=23",
+                "vue": "^3.4.38"
+            }
+        },
         "node_modules/ignore": {
             "version": "5.3.2",
             "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",

package.json

@@ -37,6 +37,7 @@
         "clsx": "^2.1.1",
         "concurrently": "^9.0.1",
         "i18next": "^26.3.6",
+        "i18next-vue": "^5.4.0",
         "laravel-vite-plugin": "^3.1",
         "tailwind-merge": "^3.2.0",
         "tailwindcss": "^4.1.1",

resources/js/app.ts

@@ -1,7 +1,8 @@
 import { createInertiaApp } from '@inertiajs/vue3';
-import { DefineComponent } from 'vue';
+import I18NextVue from 'i18next-vue';
+import type { DefineComponent } from 'vue';
+import i18next from './lang/init';
 import Layout from './layouts/Layout.vue';
-import { init } from './lang/init.js';
 
 const appName = import.meta.env.VITE_APP_NAME || 'Laravel';
 
@@ -31,7 +32,12 @@ createInertiaApp({
 
         return pages[`./pages/${name}.vue`];
     },
-    async withApp(app, options) {
-        await init;
+    withApp(app, options) {
+        app.use(I18NextVue, {
+            i18next,
+            ...options,
+        });
+
+        return app;
     },
 });

resources/js/lang/init.ts

@@ -1,7 +1,9 @@
 import i18next from 'i18next';
 import translations from './translations';
 
-export const init = i18next.init({
+await i18next.init({
     lng: 'nl',
     resources: translations,
 });
+
+export default i18next;

tsconfig.json

@@ -34,7 +34,9 @@
         "moduleResolution": "bundler" /* Specify how TypeScript looks up a file from a given module specifier. */,
         // "baseUrl": "./",                                  /* Specify the base directory to resolve non-relative module names. */
         "paths": {
-            /* Specify a set of entries that re-map imports to additional lookup locations. */ "@/*": ["./resources/js/*"],
+            /* Specify a set of entries that re-map imports to additional lookup locations. */ "@/*": [
+                "./resources/js/*"
+            ]
         },
         // "rootDirs": [],                                   /* Allow multiple folders to be treated as one when resolving modules. */
         // "typeRoots": [],                                  /* Specify multiple folders that act like './node_modules/@types'. */
@@ -43,7 +45,7 @@
         ] /* Specify type package names to be included without being referenced in a source file. */,
         // "allowUmdGlobalAccess": true,                     /* Allow accessing UMD globals from modules. */
         // "moduleSuffixes": [],                             /* List of file name suffixes to search when resolving a module. */
-        // "allowImportingTsExtensions": true,               /* Allow imports to include TypeScript file extensions. Requires '--moduleResolution bundler' and either '--noEmit' or '--emitDeclarationOnly' to be set. */
+        "allowImportingTsExtensions": true /* Allow imports to include TypeScript file extensions. Requires '--moduleResolution bundler' and either '--noEmit' or '--emitDeclarationOnly' to be set. */,
         // "rewriteRelativeImportExtensions": true,          /* Rewrite '.ts', '.tsx', '.mts', and '.cts' file extensions in relative import paths to their JavaScript equivalent in output files. */
         // "resolvePackageJsonExports": true,                /* Use the package.json 'exports' field when resolving package imports. */
         // "resolvePackageJsonImports": true,                /* Use the package.json 'imports' field when resolving imports. */
@@ -119,7 +121,7 @@
     "include": [
         "resources/js/**/*.ts",
         "resources/js/**/*.d.ts",
-        "resources/js/**/*.tsx", 
+        "resources/js/**/*.tsx",
         "resources/js/**/*.vue"
     ]
 }