frontend: Enable translation

Signed-off-by: Michael Tremer <michael.tremer@ipfire.org>

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index fe57fbbedfaf77f8023013870fcadbd7e47cff32..4084869f9438a05d0d3f33f085ae9f893f4d9913 100644 (file)
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -10,7 +10,8 @@
       "dependencies": {
         "bulma": "^1.0.4",
         "sass-embedded": "^1.89.2",
-        "vue": "^3.5.13"
+        "vue": "^3.5.13",
+        "vue-i18n": "^11.1.6"
       },
       "devDependencies": {
         "@tsconfig/node22": "^22.0.1",
@@ -867,6 +868,47 @@
         "node": ">=18"
       }
     },
+    "node_modules/@intlify/core-base": {
+      "version": "11.1.6",
+      "resolved": "https://registry.npmjs.org/@intlify/core-base/-/core-base-11.1.6.tgz",
+      "integrity": "sha512-gfMLnoWGiQkA1BwK6Qbrog/e3I6Lnkhqk08XObJb0lMq6sLG1Ggl2MazVaMfGnv/E1Td8pCS5UwR54Ys+fOxmQ==",
+      "dependencies": {
+        "@intlify/message-compiler": "11.1.6",
+        "@intlify/shared": "11.1.6"
+      },
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/kazupon"
+      }
+    },
+    "node_modules/@intlify/message-compiler": {
+      "version": "11.1.6",
+      "resolved": "https://registry.npmjs.org/@intlify/message-compiler/-/message-compiler-11.1.6.tgz",
+      "integrity": "sha512-w0LYo5sqgQZF3vEmjLlx+5PYk5EEiB+uigsBkka/DKoAIH2c5xlXcjAxhTgSw35Vrck+GOGriahFsfbHL+ZjPw==",
+      "dependencies": {
+        "@intlify/shared": "11.1.6",
+        "source-map-js": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/kazupon"
+      }
+    },
+    "node_modules/@intlify/shared": {
+      "version": "11.1.6",
+      "resolved": "https://registry.npmjs.org/@intlify/shared/-/shared-11.1.6.tgz",
+      "integrity": "sha512-G1Pe4UILhiGOItuehRW+Pk9/NlnRaMFsdnhZ1fwBjiHvrzitmPNZdLx7Eo3GPfRrsk1mdkilZSfgH8SnM419vA==",
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/kazupon"
+      }
+    },
     "node_modules/@jridgewell/gen-mapping": {
       "version": "0.3.8",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.8.tgz",
@@ -1386,6 +1428,11 @@
         "he": "^1.2.0"
       }
     },
+    "node_modules/@vue/devtools-api": {
+      "version": "6.6.4",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.6.4.tgz",
+      "integrity": "sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g=="
+    },
     "node_modules/@vue/devtools-core": {
       "version": "7.7.7",
       "resolved": "https://registry.npmjs.org/@vue/devtools-core/-/devtools-core-7.7.7.tgz",
@@ -3252,6 +3299,25 @@
         }
       }
     },
+    "node_modules/vue-i18n": {
+      "version": "11.1.6",
+      "resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-11.1.6.tgz",
+      "integrity": "sha512-+IbsW/sTZHj7U1w0rPOYJbuSB0/7DeO1nvUo3BxvO20OQgHs+ukJ3QeLqvoUA6DiLk+8SA9+djRmKC9+FC6cAg==",
+      "dependencies": {
+        "@intlify/core-base": "11.1.6",
+        "@intlify/shared": "11.1.6",
+        "@vue/devtools-api": "^6.5.0"
+      },
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/kazupon"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
     "node_modules/vue-tsc": {
       "version": "2.2.10",
       "resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-2.2.10.tgz",

diff --git a/frontend/package.json b/frontend/package.json
index 1a13a5b6b7e0985aaabf62fe7ee03f0e37cfe744..43267e49bf639d494fc6b4c07265acf371e9844b 100644 (file)
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -13,7 +13,8 @@
   "dependencies": {
     "bulma": "^1.0.4",
     "sass-embedded": "^1.89.2",
-    "vue": "^3.5.13"
+    "vue": "^3.5.13",
+    "vue-i18n": "^11.1.6"
   },
   "devDependencies": {
     "@tsconfig/node22": "^22.0.1",

diff --git a/frontend/src/main.ts b/frontend/src/main.ts
index f854274bc9b38399593ffe4e5fb8606b87f504aa..fd436668b85aca8b1e408f288949ae2626af2246 100644 (file)
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@@ -1,6 +1,32 @@
 import './assets/main.scss'
 
 import { createApp } from 'vue'
+import { createI18n } from "vue-i18n"
 import App from './App.vue'
 
-createApp(App).mount('#app')
+const app = createApp(App)
+
+// Setup translation
+app.use(
+       createI18n({
+               // Enable composition mode
+               legacy: false,
+
+               // Set the default locale
+               locale: "en",
+
+               // Load all translations
+               messages: {
+                       en: {}
+               },
+
+               // Handle any missing keys
+               missing: (locale, key) => {
+                       console.warn(`[i18n missing] ${key} in ${locale}`)
+
+                       return key
+               }
+       })
+)
+
+app.mount('#app')