feat:#60 added first example localization

frontend/package-lock.json

@@ -18,6 +18,7 @@
         "primeicons": "^6.0.1",
         "primevue": "^3.32.2",
         "vue": "^3.3.4",
+        "vue-i18n": "^9.4.1",
         "vue-router": "^4.2.4"
       },
       "devDependencies": {
@@ -584,6 +585,47 @@
       "integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==",
       "dev": true
     },
+    "node_modules/@intlify/core-base": {
+      "version": "9.4.1",
+      "resolved": "https://registry.npmjs.org/@intlify/core-base/-/core-base-9.4.1.tgz",
+      "integrity": "sha512-WIwx+elsZbxSMxRG5+LC+utRohFvmZMoDevfKOfnYMLbpCjCSavqTfHJAtfsY6ruowzqXeKkeLhRHbYbjoJx5g==",
+      "dependencies": {
+        "@intlify/message-compiler": "9.4.1",
+        "@intlify/shared": "9.4.1"
+      },
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/kazupon"
+      }
+    },
+    "node_modules/@intlify/message-compiler": {
+      "version": "9.4.1",
+      "resolved": "https://registry.npmjs.org/@intlify/message-compiler/-/message-compiler-9.4.1.tgz",
+      "integrity": "sha512-aN2N+dUx320108QhH51Ycd2LEpZ+NKbzyQ2kjjhqMcxhHdxtOnkgdx+MDBhOy/CObwBmhC3Nygzc6hNlfKvPNw==",
+      "dependencies": {
+        "@intlify/shared": "9.4.1",
+        "source-map-js": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/kazupon"
+      }
+    },
+    "node_modules/@intlify/shared": {
+      "version": "9.4.1",
+      "resolved": "https://registry.npmjs.org/@intlify/shared/-/shared-9.4.1.tgz",
+      "integrity": "sha512-A51elBmZWf1FS80inf/32diO9DeXoqg9GR9aUDHFcfHoNDuT46Q+fpPOdj8jiJnSHSBh8E1E+6qWRhAZXdK3Ng==",
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/kazupon"
+      }
+    },
     "node_modules/@jridgewell/gen-mapping": {
       "version": "0.3.3",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz",
@@ -3525,6 +3567,25 @@
         "eslint": ">=6.0.0"
       }
     },
+    "node_modules/vue-i18n": {
+      "version": "9.4.1",
+      "resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-9.4.1.tgz",
+      "integrity": "sha512-vnQyYE9LBuNOqPpETIcCaGnAyLEqfeIvDcyZ9T+WBCWFTqWw1J8FuF1jfeDwpHBi5JKgAwgXyq1mt8jp/x/GPA==",
+      "dependencies": {
+        "@intlify/core-base": "9.4.1",
+        "@intlify/shared": "9.4.1",
+        "@vue/devtools-api": "^6.5.0"
+      },
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/kazupon"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
     "node_modules/vue-router": {
       "version": "4.2.4",
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.2.4.tgz",

frontend/package.json

@@ -21,6 +21,7 @@
     "primeicons": "^6.0.1",
     "primevue": "^3.32.2",
     "vue": "^3.3.4",
+    "vue-i18n": "^9.4.1",
     "vue-router": "^4.2.4"
   },
   "devDependencies": {

frontend/src/components/MenuBar.vue

@@ -1,34 +1,36 @@
 <script lang="ts" setup>
 import { ref } from "vue";
+import { useI18n } from "vue-i18n";
+const {t} = useI18n({})
 
 const items = ref([
   {
-    label: "Create Calendar",
+    label: t('createCalendar'),
     icon: "pi pi-fw pi-plus",
     url: "/",
   },
   {
-    label: "Edit Calendar",
+    label: t('editCalendar'),
     icon: "pi pi-fw pi-pencil",
     url: "/edit",
   },
   {
-    label: "Check Room Availability",
+    label: t('roomFinder'),
     icon: "pi pi-fw pi-calendar",
     url: "/rooms",
   },
   {
-    label: "FAQ",
+    label: t('faq'),
     icon: "pi pi-fw pi-book",
     url: "/faq",
   },
   {
-    label: "Imprint",
+    label: t('imprint'),
     icon: "pi pi-fw pi-id-card",
     url: "/imprint",
   },
   {
-    label: "Privacy",
+    label: t('privacy'),
     url: "/privacy-policy",
     icon: "pi pi-fw pi-exclamation-triangle",
   },

frontend/src/i18n/index.ts

@@ -0,0 +1,11 @@
+import { createI18n } from 'vue-i18n'
+import messages from "./messages.ts";
+
+const i18n = createI18n({
+  legacy: false,
+  globalInjection: true,
+  locale: 'en',
+  messages,
+})
+
+export default i18n

frontend/src/i18n/messages.ts

@@ -0,0 +1,18 @@
+export default {
+  en: {
+      createCalendar: 'Create Calendar',
+      editCalendar: 'Edit Calendar',
+      roomFinder: 'Room Finder',
+      faq: 'FAQ',
+      imprint: 'Imprint',
+      privacy: 'Privacy',
+  },
+  de: {
+      createCalendar: 'Kalender erstellen',
+      editCalendar: 'Kalender bearbeiten',
+      roomFinder: 'Raumfinder',
+      faq: 'FAQ',
+      imprint: 'Impressum',
+      privacy: 'Datenschutz',
+  }
+}

frontend/src/main.ts

@@ -30,6 +30,7 @@ import Column from "primevue/column";
 import DynamicDialog from "primevue/dynamicdialog";
 import DialogService from "primevue/dialogservice";
 import ProgressSpinner from "primevue/progressspinner";
+import i18n from "./i18n";
 
 const app = createApp(App);
 const pinia = createPinia();
@@ -39,6 +40,7 @@ app.use(router);
 app.use(ToastService);
 app.use(pinia);
 app.use(DialogService);
+app.use(i18n);
 app.component("Button", Button);
 app.component("Menu", Menu);
 app.component("Menubar", Menubar);