From: Michael Tremer <michael.tremer@ipfire.org>
Date: Thu, 19 Jun 2025 15:50:00 +0000 (+0000)
Subject: frontend: Enable translation
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=2d27227e4c00a0793bffddb7fd537b6ac2afe3f7;p=pbs.git

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 fe57fbbe..4084869f 100644
--- 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 1a13a5b6..43267e49 100644
--- 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 f854274b..fd436668 100644
--- 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')