From: Michael Tremer <michael.tremer@ipfire.org>
Date: Fri, 9 May 2025 15:59:23 +0000 (+0000)
Subject: frontend: Enable translation
X-Git-Url: http://git.ipfire.org/gitweb.cgi?a=commitdiff_plain;h=d831adaa5fd0f340db36ad6f7725741331fcb440;p=people%2Fms%2Fwestferry.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 d65cee5..6bf8996 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -11,6 +11,7 @@
         "bulma": "^1.0.4",
         "pinia": "^3.0.1",
         "vue": "^3.5.13",
+        "vue-i18n": "^11.1.3",
         "vue-router": "^4.5.0"
       },
       "devDependencies": {
@@ -1271,6 +1272,47 @@
         "url": "https://github.com/sponsors/nzakas"
       }
     },
+    "node_modules/@intlify/core-base": {
+      "version": "11.1.3",
+      "resolved": "https://registry.npmjs.org/@intlify/core-base/-/core-base-11.1.3.tgz",
+      "integrity": "sha512-cMuHunYO7LE80azTitcvEbs1KJmtd6g7I5pxlApV3Jo547zdO3h31/0uXpqHc+Y3RKt1wo2y68RGSx77Z1klyA==",
+      "dependencies": {
+        "@intlify/message-compiler": "11.1.3",
+        "@intlify/shared": "11.1.3"
+      },
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/kazupon"
+      }
+    },
+    "node_modules/@intlify/message-compiler": {
+      "version": "11.1.3",
+      "resolved": "https://registry.npmjs.org/@intlify/message-compiler/-/message-compiler-11.1.3.tgz",
+      "integrity": "sha512-7rbqqpo2f5+tIcwZTAG/Ooy9C8NDVwfDkvSeDPWUPQW+Dyzfw2o9H103N5lKBxO7wxX9dgCDjQ8Umz73uYw3hw==",
+      "dependencies": {
+        "@intlify/shared": "11.1.3",
+        "source-map-js": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/kazupon"
+      }
+    },
+    "node_modules/@intlify/shared": {
+      "version": "11.1.3",
+      "resolved": "https://registry.npmjs.org/@intlify/shared/-/shared-11.1.3.tgz",
+      "integrity": "sha512-pTFBgqa/99JRA2H1qfyqv97MKWJrYngXBA/I0elZcYxvJgcCw3mApAoPW3mJ7vx3j+Ti0FyKUFZ4hWxdjKaxvA==",
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/kazupon"
+      }
+    },
     "node_modules/@isaacs/cliui": {
       "version": "8.0.2",
       "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
@@ -7034,6 +7076,30 @@
         "url": "https://opencollective.com/eslint"
       }
     },
+    "node_modules/vue-i18n": {
+      "version": "11.1.3",
+      "resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-11.1.3.tgz",
+      "integrity": "sha512-Pcylh9z9S5+CJAqgbRZ3EKxFIBIrtY5YUppU722GIT65+Nukm0TCqiQegZnNLCZkXGthxe0cpqj0AoM51H+6Gw==",
+      "dependencies": {
+        "@intlify/core-base": "11.1.3",
+        "@intlify/shared": "11.1.3",
+        "@vue/devtools-api": "^6.5.0"
+      },
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/kazupon"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
+    "node_modules/vue-i18n/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-router": {
       "version": "4.5.1",
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.5.1.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 820c0cd..eb32881 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -17,6 +17,7 @@
     "bulma": "^1.0.4",
     "pinia": "^3.0.1",
     "vue": "^3.5.13",
+    "vue-i18n": "^11.1.3",
     "vue-router": "^4.5.0"
   },
   "devDependencies": {
diff --git a/frontend/src/main.ts b/frontend/src/main.ts
index 032fd5e..3155bf7 100644
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@@ -1,6 +1,7 @@
 import './assets/main.scss'
 
 import { createApp } from 'vue'
+import { createI18n } from "vue-i18n"
 import { createPinia } from 'pinia'
 
 import App from './App.vue'
@@ -8,6 +9,29 @@ import router from './router'
 
 const app = createApp(App)
 
+// Setup translation
+const i18n = 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.use(i18n)
+
 app.use(createPinia())
 app.use(router)
 
diff --git a/frontend/src/views/HomeView.vue b/frontend/src/views/HomeView.vue
index 61ebc4b..a348a64 100644
--- a/frontend/src/views/HomeView.vue
+++ b/frontend/src/views/HomeView.vue
@@ -4,7 +4,7 @@
 
 <template>
 	<Section>
-		<h1 class="title">Welcome</h1>
-		<p>This is the front page</p>
+		<h1 class="title">{{ $t("Welcome") }}</h1>
+		<p>{{ $t("This is the front page") }}</p>
 	</Section>
 </template>