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 d65cee5a1bc1f53ed52219359bc9783ae27bd1ae..6bf89963502f69af557bd6f48cdeac1b35251d37 100644 (file)
--- 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 820c0cd97ba540903622f99abe6c8853ab87ecde..eb32881ef9080f3509692c337d72d5785ee4f534 100644 (file)
--- 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 032fd5e938028ee4c1565d1c2156601aa707008a..3155bf721bd56a56e0d4da6f882126a7d9c9d86f 100644 (file)
--- 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 61ebc4b6cb5863eaf8cea51d4c63f41a86cc5f7f..a348a64b19c238b57c7afd67291fc763211df9b7 100644 (file)
--- 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>