fix:#61 added i18n update and pinned typescript version against vue-tsc problem with

2025-07-16 09:38:49 +02:00 · 2024-12-03 11:34:44 +01:00
parent 8718a968b8
commit 0d0f34e0a1
19 changed files with 188 additions and 172 deletions
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@ -40,14 +40,14 @@
        "sass": "^1.81.1",
        "sass-loader": "^13.3.3",
        "terser": "^5.36.0",
-        "typescript": "^5.7.2",
+        "typescript": "5.6.3",
        "vite": "^5.4.11",
        "vite-plugin-vue-devtools": "^7.6.7",
        "vite-ssg": "^0.23.8",
        "vite-ssg-sitemap": "^0.7.1",
        "vitest": "^1.6.0",
        "vue-router": "^4.5.0",
-        "vue-tsc": "^2.1.10"
+        "vue-tsc": "^2.1.6"
      }
    },
    "node_modules/@ampproject/remapping": {
@ -6921,9 +6921,9 @@
      }
    },
    "node_modules/typescript": {
-      "version": "5.7.2",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.7.2.tgz",
-      "integrity": "sha512-i5t66RHxDvVN40HfDd1PsEThGNnlMCMT3jMUuoh9/0TaqWevNontacunWyN02LA9/fIbEWlcHZcgTKb9QoaLfg==",
+      "version": "5.6.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.6.3.tgz",
+      "integrity": "sha512-hjcS1mhfuyi4WW8IWtjP7brDrG2cuDZukyrYrSauoXGNgx0S7zceP07adYkJycEr56BOUTNPzbInooiN3fn1qw==",
      "devOptional": true,
      "license": "Apache-2.0",
      "bin": {
--- a/frontend/package.json
+++ b/frontend/package.json
@ -45,13 +45,13 @@
    "sass": "^1.81.1",
    "sass-loader": "^13.3.3",
    "terser": "^5.36.0",
-    "typescript": "^5.7.2",
+    "typescript": "5.6.3",
    "vite": "^5.4.11",
    "vite-plugin-vue-devtools": "^7.6.7",
    "vite-ssg": "^0.23.8",
    "vite-ssg-sitemap": "^0.7.1",
    "vitest": "^1.6.0",
    "vue-router": "^4.5.0",
-    "vue-tsc": "^2.1.10"
+    "vue-tsc": "^2.1.6"
  }
 }
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@ -117,7 +117,7 @@ if (!import.meta.env.SSR) window.addEventListener("resize", updateMobile);
    </transition>
  </RouterView>
  <!-- show CalendarPreview but only on specific router views -->
-  <CalendarPreview v-if="isDisabled($route.name)" />
+  <CalendarPreview v-if="isDisabled(route.name)" />

  <VueQueryDevtools />
  <Toast />
--- a/frontend/src/components/AdditionalModuleTable.vue
+++ b/frontend/src/components/AdditionalModuleTable.vue
@ -132,11 +132,11 @@ function unselectModule(event: DataTableRowUnselectEvent) {
      :rows-per-page-options="[5, 10, 20, 50]"
      paginator-template="FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink RowsPerPageDropdown"
      :current-page-report-template="
-        $t('additionalModules.paginator.from') +
+        t('additionalModules.paginator.from') +
        '{first}' +
-        $t('additionalModules.paginator.to') +
+        t('additionalModules.paginator.to') +
        '{last}' +
-        $t('additionalModules.paginator.of') +
+        t('additionalModules.paginator.of') +
        '{totalRecords}'
      "
      filter-display="row"
@ -155,7 +155,7 @@ function unselectModule(event: DataTableRowUnselectEvent) {

      <Column
        field="course"
-        :header="$t('additionalModules.course')"
+        :header="t('additionalModules.course')"
        :show-clear-button="false"
        :show-filter-menu="false"
      >
@ -173,7 +173,7 @@ function unselectModule(event: DataTableRowUnselectEvent) {
      </Column>
      <Column
        field="name"
-        :header="$t('additionalModules.module')"
+        :header="t('additionalModules.module')"
        :show-clear-button="false"
        :show-filter-menu="false"
      >
@ -194,7 +194,7 @@ function unselectModule(event: DataTableRowUnselectEvent) {
        filter-field="eventType"
        :filter-menu-style="{ width: '10rem' }"
        style="min-width: 10rem"
-        :header="$t('additionalModules.eventType')"
+        :header="t('additionalModules.eventType')"
        :show-clear-button="false"
        :show-filter-menu="false"
      >
@ -213,7 +213,7 @@ function unselectModule(event: DataTableRowUnselectEvent) {
      </Column>
      <Column
        field="prof"
-        :header="$t('additionalModules.professor')"
+        :header="t('additionalModules.professor')"
        :show-clear-button="false"
        :show-filter-menu="false"
      >
@ -221,7 +221,7 @@ function unselectModule(event: DataTableRowUnselectEvent) {
          <Skeleton></Skeleton>
        </template>
      </Column>
-      <Column :header="$t('additionalModules.info')">
+      <Column :header="t('additionalModules.info')">
        <template #body="slotProps">
          <div v-if="loadingData">
            <Skeleton></Skeleton>
@ -232,7 +232,7 @@ function unselectModule(event: DataTableRowUnselectEvent) {
              severity="secondary"
              rounded
              outlined
-              :aria-label="$t('additionalModules.info-long')"
+              :aria-label="t('additionalModules.info-long')"
              class="small-button"
              @click.stop="showInfo(slotProps.data)"
            ></Button>
--- a/frontend/src/components/CalendarPreview.vue
+++ b/frontend/src/components/CalendarPreview.vue
@ -52,7 +52,7 @@ const columns = computed(() => [
    :visible="dialogVisible && previewOn"
    :maximizable="!mobilePage"
    :draggable="false"
-    :header="$t('calendarPreview.preview-long')"
+    :header="t('calendarPreview.preview-long')"
    class="w-full lg:w-30rem lg:h-auto m-0 lg:m-2"
    position="bottomleft"
    @update:visible="dialogVisible = $event"
@ -85,7 +85,7 @@ const columns = computed(() => [
    <template #button>
      <Button
        icon="pi pi-calendar"
-        :label="$t('calendarPreview.preview')"
+        :label="t('calendarPreview.preview')"
        class="p-button-rounded p-button-primary"
        raised
        @click="dialogVisible = true"
--- a/frontend/src/components/LocaleSwitcher.vue
+++ b/frontend/src/components/LocaleSwitcher.vue
@ -23,7 +23,7 @@ import { useI18n } from "vue-i18n";
 import { usePrimeVue } from "primevue/config";
 import primeVue_de from "@/i18n/translations/primevue/prime_vue_local_de.json";
 import primeVue_en from "@/i18n/translations/primevue/prime_vue_local_en.json";
-const { t } = useI18n({ useScope: "global" });
+const { t, locale, availableLocales } = useI18n({ useScope: "global" });

 const countries = computed(() => [
  { name: t("english"), code: "en", icon: "🇬🇧" },
@ -54,8 +54,8 @@ updateLocale(localeStore().locale);
 </script>
 <template>
  <Dropdown
-    v-model="$i18n.locale"
-    :options="$i18n.availableLocales"
+    v-model="locale"
+    :options="availableLocales"
    option-label="name"
    placeholder="Select a Language"
    class="w-full md:w-14rem"
--- a/frontend/src/components/MenuBar.vue
+++ b/frontend/src/components/MenuBar.vue
@ -21,8 +21,11 @@ import { computed, ref } from "vue";
 import { useI18n } from "vue-i18n";
 import LocaleSwitcher from "./LocaleSwitcher.vue";
 import DarkModeSwitcher from "./DarkModeSwitcher.vue";
+import { useRoute } from "vue-router";
 const { t } = useI18n({ useScope: "global" });

+const route = useRoute();
+
 const isDark = ref(true);

 const items = computed(() => [
@ -96,7 +99,7 @@ function handleDarkModeToggled(isDarkVar: boolean) {
      >
        <a
          :class="
-            $route.path == item.route
+            route.path == item.route
              ? 'flex align-items-center active'
              : 'flex align-items-center'
          "
@ -111,7 +114,7 @@ function handleDarkModeToggled(isDarkVar: boolean) {
      <a
        v-else-if="item.url"
        :class="
-          $route.path.includes(item.info)
+          route.path.includes(item.info)
            ? 'flex align-items-center active'
            : 'flex align-items-center'
        "
@ -124,7 +127,7 @@ function handleDarkModeToggled(isDarkVar: boolean) {
      <span
        v-else
        :class="
-          $route.path.includes(item.info)
+          route.path.includes(item.info)
            ? 'flex align-items-center active'
            : 'flex align-items-center'
        "
--- a/frontend/src/components/ModuleInformation.vue
+++ b/frontend/src/components/ModuleInformation.vue
@ -62,13 +62,13 @@ function formatWeekday(weekday: string) {
    <h2>{{ module.name }}</h2>
    <table class="w-full">
      <tr>
-        <td>{{ $t("moduleInformation.course") }}: {{ module.course }}</td>
+        <td>{{ t("moduleInformation.course") }}: {{ module.course }}</td>
      </tr>
      <tr>
-        <td>{{ $t("moduleInformation.person") }}: {{ module.prof }}</td>
+        <td>{{ t("moduleInformation.person") }}: {{ module.prof }}</td>
      </tr>
      <tr>
-        <td>{{ $t("moduleInformation.semester") }}: {{ module.semester }}</td>
+        <td>{{ t("moduleInformation.semester") }}: {{ module.semester }}</td>
      </tr>
      <tr>
        <td>
@ -81,33 +81,33 @@ function formatWeekday(weekday: string) {
            >
              <Column
                field="day"
-                :header="$t('moduleInformation.day')"
+                :header="t('moduleInformation.day')"
              ></Column>
-              <Column field="start" :header="$t('moduleInformation.start')">
+              <Column field="start" :header="t('moduleInformation.start')">
                <template #body="slotProps">
                  {{ formatTimestamp(slotProps.data.start) }}
                </template>
              </Column>
-              <Column field="end" :header="$t('moduleInformation.end')">
+              <Column field="end" :header="t('moduleInformation.end')">
                <template #body="slotProps">
                  {{ formatTimestamp(slotProps.data.end) }}
                </template>
              </Column>
              <Column
                field="rooms"
-                :header="$t('moduleInformation.room')"
+                :header="t('moduleInformation.room')"
              ></Column>
              <Column
                field="eventType"
-                :header="$t('moduleInformation.type')"
+                :header="t('moduleInformation.type')"
              ></Column>
              <Column
                field="notes"
-                :header="$t('moduleInformation.notes')"
+                :header="t('moduleInformation.notes')"
              ></Column>
              <Column
                field="week"
-                :header="$t('moduleInformation.week')"
+                :header="t('moduleInformation.week')"
              ></Column>
            </DataTable>
            <DataView
@ -140,7 +140,7 @@ function formatWeekday(weekday: string) {
                          <div class="mr-2">{{ formatWeekday(item.day) }}</div>
                          <div class="mr-2">
                            {{
-                              $t("moduleInformation.nthWeek", {
+                              t("moduleInformation.nthWeek", {
                                count: item.week,
                              })
                            }}
@ -150,25 +150,25 @@ function formatWeekday(weekday: string) {
                          <table>
                            <tr>
                              <td class="mr-2">
-                                <b>{{ $t("moduleInformation.start") }}:</b>
+                                <b>{{ t("moduleInformation.start") }}:</b>
                              </td>
                              <td>{{ formatTimestamp(item.start) }}</td>
                            </tr>
                            <tr>
                              <td class="mr-2">
-                                <b>{{ $t("moduleInformation.end") }}:</b>
+                                <b>{{ t("moduleInformation.end") }}:</b>
                              </td>
                              <td>{{ formatTimestamp(item.end) }}</td>
                            </tr>
                            <tr>
                              <td class="mr-2">
-                                <b>{{ $t("moduleInformation.room") }}:</b>
+                                <b>{{ t("moduleInformation.room") }}:</b>
                              </td>
                              <td>{{ item.rooms }}</td>
                            </tr>
                            <tr>
                              <td class="mr-2">
-                                <b>{{ $t("moduleInformation.notes") }}:</b>
+                                <b>{{ t("moduleInformation.notes") }}:</b>
                              </td>
                              <td>{{ item.notes }}</td>
                            </tr>
--- a/frontend/src/components/ModuleSelection.vue
+++ b/frontend/src/components/ModuleSelection.vue
@ -20,6 +20,8 @@ along with this program.  If not, see <https://www.gnu.org/licenses/>.
 import { computed, ComputedRef, PropType } from "vue";
 import { Module } from "../model/module.ts";
 import moduleStore from "../store/moduleStore";
+import { useI18n } from "vue-i18n";
+const { t } = useI18n({ useScope: "global" });

 const store = moduleStore();
 const props = defineProps({
@ -83,7 +85,7 @@ function toggleModule(module: Module) {
          class="flex justify-content-between align-items-center flex-wrap md:mx-4"
        >
          <h3>
-            {{ $t("moduleSelection.modules") }} -
+            {{ t("moduleSelection.modules") }} -
            {{ store.countModules() }}
          </h3>
          <div
@ -92,8 +94,8 @@ function toggleModule(module: Module) {
            <p>
              {{
                allSelected
-                  ? $t("moduleSelection.deselectAll")
-                  : $t("moduleSelection.selectAll")
+                  ? t("moduleSelection.deselectAll")
+                  : t("moduleSelection.selectAll")
              }}
            </p>
            <InputSwitch
@ -107,7 +109,7 @@ function toggleModule(module: Module) {
      </template>
      <template #empty>
        <p class="p-4 text-2xl font-bold text-900 empty-message">
-          {{ $t("moduleSelection.noModulesAvailable") }}
+          {{ t("moduleSelection.noModulesAvailable") }}
        </p>
      </template>
      <template #list="slotProps">
@ -126,8 +128,8 @@ function toggleModule(module: Module) {
                :icon="store.hasModule(item) ? 'pi pi-times' : 'pi pi-plus'"
                :label="
                  store.hasModule(item)
-                    ? $t('moduleSelection.selected')
-                    : $t('moduleSelection.unselected')
+                    ? t('moduleSelection.selected')
+                    : t('moduleSelection.unselected')
                "
                outlined
                :severity="store.hasModule(item) ? '' : 'secondary'"
--- a/frontend/src/components/ModuleTemplateDialog.vue
+++ b/frontend/src/components/ModuleTemplateDialog.vue
@ -66,7 +66,7 @@ const placeholders = computed(() => [
  <Dialog
    v-model:visible="helpVisible"
    class="w-full md:w-auto"
-    :header="$t('moduleTemplateDialog.moduleConfiguration')"
+    :header="t('moduleTemplateDialog.moduleConfiguration')"
  >
    <p>
      {{ t("moduleTemplateDialog.explanationOne") }}
@ -75,15 +75,15 @@ const placeholders = computed(() => [
    <DataTable :value="placeholders">
      <Column
        field="placeholder"
-        :header="$t('moduleTemplateDialog.placeholder')"
+        :header="t('moduleTemplateDialog.placeholder')"
      ></Column>
      <Column
        field="description"
-        :header="$t('moduleTemplateDialog.description')"
+        :header="t('moduleTemplateDialog.description')"
      ></Column>
      <Column
        field="examples"
-        :header="$t('moduleTemplateDialog.examples')"
+        :header="t('moduleTemplateDialog.examples')"
      ></Column>
    </DataTable>
    <p>
--- a/frontend/src/view/CourseSelection.vue
+++ b/frontend/src/view/CourseSelection.vue
@ -96,11 +96,11 @@ getCourses();
 <template>
  <DynamicPage
    :hide-content="selectedCourse.name === ''"
-    :headline="$t('courseSelection.headline')"
-    :sub-title="$t('courseSelection.subTitle')"
+    :headline="t('courseSelection.headline')"
+    :sub-title="t('courseSelection.subTitle')"
    icon="pi pi-calendar"
    :button="{
-      label: $t('courseSelection.nextStep'),
+      label: t('courseSelection.nextStep'),
      icon: 'pi pi-arrow-right',
      disabled: store.isEmpty(),
      onClick: () => router.push('/additional-modules'),
@ -113,8 +113,8 @@ getCourses();
        :class="flexSpecs"
        filter
        option-label="name"
-        :placeholder="$t('courseSelection.courseDropDown')"
-        :empty-message="$t('courseSelection.noCoursesAvailable')"
+        :placeholder="t('courseSelection.courseDropDown')"
+        :empty-message="t('courseSelection.noCoursesAvailable')"
        :auto-filter-focus="true"
        @change="getModules()"
      ></Dropdown>
@ -123,7 +123,7 @@ getCourses();
        :options="semesters"
        :class="flexSpecs"
        option-label="name"
-        :placeholder="$t('courseSelection.semesterDropDown')"
+        :placeholder="t('courseSelection.semesterDropDown')"
        @change="getCourses()"
      ></Dropdown>
    </template>
--- a/frontend/src/view/FaqView.vue
+++ b/frontend/src/view/FaqView.vue
@ -17,99 +17,103 @@ along with this program.  If not, see <https://www.gnu.org/licenses/>.
 -->

 <script lang="ts" setup>
+
+import { useI18n } from "vue-i18n";
+const { t } = useI18n({ useScope: "global" });
+
 </script>

 <template>
  <div class="flex align-items-center justify-content-center flex-column">
    <div class="flex align-items-center justify-content-center m-2">
-      <h1>{{ $t("faqView.headline") }}</h1>
+      <h1>{{ t("faqView.headline") }}</h1>
    </div>

    <div class="flex flex-column lg:col-7">
      <div class="grid my-2">
        <div class="col">
-          {{ $t("faqView.firstQuestion") }}
+          {{ t("faqView.firstQuestion") }}
        </div>
        <div class="col">
-          {{ $t("faqView.firstAnswer") }}
+          {{ t("faqView.firstAnswer") }}
        </div>
      </div>
      <div class="grid my-2">
-        <div class="col">{{ $t("faqView.secondQuestion") }}</div>
+        <div class="col">{{ t("faqView.secondQuestion") }}</div>
        <div class="col">
-          {{ $t("faqView.secondAnswer") }}
+          {{ t("faqView.secondAnswer") }}
        </div>
      </div>

      <div class="grid my-2">
-        <div class="col">{{ $t("faqView.thirdQuestion") }}</div>
+        <div class="col">{{ t("faqView.thirdQuestion") }}</div>
        <div class="col">
          <Accordion>
-            <AccordionTab :header="$t('faqView.thirdAnswer.tabTitle')">
+            <AccordionTab :header="t('faqView.thirdAnswer.tabTitle')">
              <ol>
-                <li>{{ $t("faqView.thirdAnswer.google.first") }}</li>
+                <li>{{ t("faqView.thirdAnswer.google.first") }}</li>
                <li>
-                  {{ $t("faqView.thirdAnswer.google.second") }}
+                  {{ t("faqView.thirdAnswer.google.second") }}
                </li>
                <li>
-                  {{ $t("faqView.thirdAnswer.google.third") }}
+                  {{ t("faqView.thirdAnswer.google.third") }}
                </li>
                <li>
-                  {{ $t("faqView.thirdAnswer.google.fourth") }}
+                  {{ t("faqView.thirdAnswer.google.fourth") }}
                </li>
              </ol>
            </AccordionTab>
            <AccordionTab header="HTWK App">
-              <p>{{ $t("faqView.thirdAnswer.htwk_app.description") }}</p>
+              <p>{{ t("faqView.thirdAnswer.htwk_app.description") }}</p>
              <ol>
-                <li>{{ $t("faqView.thirdAnswer.htwk_app.one") }}</li>
-                <li>{{ $t("faqView.thirdAnswer.htwk_app.two") }}</li>
-                <li>{{ $t("faqView.thirdAnswer.htwk_app.three") }}</li>
-                <li>{{ $t("faqView.thirdAnswer.htwk_app.four") }}</li>
-                <li>{{ $t("faqView.thirdAnswer.htwk_app.five") }}</li>
+                <li>{{ t("faqView.thirdAnswer.htwk_app.one") }}</li>
+                <li>{{ t("faqView.thirdAnswer.htwk_app.two") }}</li>
+                <li>{{ t("faqView.thirdAnswer.htwk_app.three") }}</li>
+                <li>{{ t("faqView.thirdAnswer.htwk_app.four") }}</li>
+                <li>{{ t("faqView.thirdAnswer.htwk_app.five") }}</li>
              </ol>
            </AccordionTab>
            <AccordionTab
-              :header="$t('faqView.thirdAnswer.microsoft_outlook.title')"
+              :header="t('faqView.thirdAnswer.microsoft_outlook.title')"
            >
              <p>
                {{
-                  $t("faqView.thirdAnswer.microsoft_outlook.outlook_2010.title")
+                  t("faqView.thirdAnswer.microsoft_outlook.outlook_2010.title")
                }}
              </p>

              <ol>
                <li>
                  {{
-                    $t(
+                    t(
                      "faqView.thirdAnswer.microsoft_outlook.outlook_2010.first",
                    )
                  }}
                </li>
                <li>
                  {{
-                    $t(
+                    t(
                      "faqView.thirdAnswer.microsoft_outlook.outlook_2010.second",
                    )
                  }}
                </li>
                <li>
                  {{
-                    $t(
+                    t(
                      "faqView.thirdAnswer.microsoft_outlook.outlook_2010.third",
                    )
                  }}
                </li>
                <li>
                  {{
-                    $t(
+                    t(
                      "faqView.thirdAnswer.microsoft_outlook.outlook_2010.fourth",
                    )
                  }}
                </li>
                <li>
                  {{
-                    $t(
+                    t(
                      "faqView.thirdAnswer.microsoft_outlook.outlook_2010.fifth",
                    )
                  }}
@ -118,141 +122,141 @@ along with this program.  If not, see <https://www.gnu.org/licenses/>.

              <p>
                {{
-                  $t("faqView.thirdAnswer.microsoft_outlook.outlook_2007.title")
+                  t("faqView.thirdAnswer.microsoft_outlook.outlook_2007.title")
                }}
              </p>

              <ol>
                <li>
                  {{
-                    $t(
+                    t(
                      "faqView.thirdAnswer.microsoft_outlook.outlook_2007.first",
                    )
                  }}
                </li>
                <li>
                  {{
-                    $t(
+                    t(
                      "faqView.thirdAnswer.microsoft_outlook.outlook_2007.second",
                    )
                  }}
                </li>
                <li>
                  {{
-                    $t(
+                    t(
                      "faqView.thirdAnswer.microsoft_outlook.outlook_2007.third",
                    )
                  }}
                </li>
                <li>
                  {{
-                    $t(
+                    t(
                      "faqView.thirdAnswer.microsoft_outlook.outlook_2007.fourth",
                    )
                  }}
                </li>
                <li>
                  {{
-                    $t(
+                    t(
                      "faqView.thirdAnswer.microsoft_outlook.outlook_2007.fifth",
                    )
                  }}
                </li>
                <li>
                  {{
-                    $t(
+                    t(
                      "faqView.thirdAnswer.microsoft_outlook.outlook_2007.sixth",
                    )
                  }}
                </li>
              </ol>
            </AccordionTab>
-            <AccordionTab :header="$t('faqView.thirdAnswer.apple_osx.title')">
+            <AccordionTab :header="t('faqView.thirdAnswer.apple_osx.title')">
              <ol>
-                <li>{{ $t("faqView.thirdAnswer.apple_osx.first") }}</li>
-                <li>{{ $t("faqView.thirdAnswer.apple_osx.second") }}</li>
-                <li>{{ $t("faqView.thirdAnswer.apple_osx.third") }}</li>
-                <li>{{ $t("faqView.thirdAnswer.apple_osx.fourth") }}</li>
+                <li>{{ t("faqView.thirdAnswer.apple_osx.first") }}</li>
+                <li>{{ t("faqView.thirdAnswer.apple_osx.second") }}</li>
+                <li>{{ t("faqView.thirdAnswer.apple_osx.third") }}</li>
+                <li>{{ t("faqView.thirdAnswer.apple_osx.fourth") }}</li>
              </ol>
            </AccordionTab>
-            <AccordionTab :header="$t('faqView.thirdAnswer.thunderbird.title')">
+            <AccordionTab :header="t('faqView.thirdAnswer.thunderbird.title')">
              <ol>
-                <li>{{ $t("faqView.thirdAnswer.thunderbird.one") }}</li>
-                <li>{{ $t("faqView.thirdAnswer.thunderbird.two") }}</li>
-                <li>{{ $t("faqView.thirdAnswer.thunderbird.three") }}</li>
-                <li>{{ $t("faqView.thirdAnswer.thunderbird.four") }}</li>
-                <li>{{ $t("faqView.thirdAnswer.thunderbird.five") }}</li>
-                <li>{{ $t("faqView.thirdAnswer.thunderbird.six") }}</li>
-                <li>{{ $t("faqView.thirdAnswer.thunderbird.seven") }}</li>
+                <li>{{ t("faqView.thirdAnswer.thunderbird.one") }}</li>
+                <li>{{ t("faqView.thirdAnswer.thunderbird.two") }}</li>
+                <li>{{ t("faqView.thirdAnswer.thunderbird.three") }}</li>
+                <li>{{ t("faqView.thirdAnswer.thunderbird.four") }}</li>
+                <li>{{ t("faqView.thirdAnswer.thunderbird.five") }}</li>
+                <li>{{ t("faqView.thirdAnswer.thunderbird.six") }}</li>
+                <li>{{ t("faqView.thirdAnswer.thunderbird.seven") }}</li>
              </ol>
            </AccordionTab>
-            <AccordionTab :header="$t('faqView.thirdAnswer.iphone.title')">
-              <p>{{ $t("faqView.thirdAnswer.iphone.description") }}</p>
+            <AccordionTab :header="t('faqView.thirdAnswer.iphone.title')">
+              <p>{{ t("faqView.thirdAnswer.iphone.description") }}</p>

              <ol>
-                <li>{{ $t("faqView.thirdAnswer.iphone.one") }}</li>
-                <li>{{ $t("faqView.thirdAnswer.iphone.two") }}</li>
-                <li>{{ $t("faqView.thirdAnswer.iphone.three") }}</li>
-                <li>{{ $t("faqView.thirdAnswer.iphone.four") }}</li>
-                <li>{{ $t("faqView.thirdAnswer.iphone.five") }}</li>
-                <li>{{ $t("faqView.thirdAnswer.iphone.six") }}</li>
-                <li>{{ $t("faqView.thirdAnswer.iphone.seven") }}</li>
-                <li>{{ $t("faqView.thirdAnswer.iphone.eight") }}</li>
-                <li>{{ $t("faqView.thirdAnswer.iphone.nine") }}</li>
+                <li>{{ t("faqView.thirdAnswer.iphone.one") }}</li>
+                <li>{{ t("faqView.thirdAnswer.iphone.two") }}</li>
+                <li>{{ t("faqView.thirdAnswer.iphone.three") }}</li>
+                <li>{{ t("faqView.thirdAnswer.iphone.four") }}</li>
+                <li>{{ t("faqView.thirdAnswer.iphone.five") }}</li>
+                <li>{{ t("faqView.thirdAnswer.iphone.six") }}</li>
+                <li>{{ t("faqView.thirdAnswer.iphone.seven") }}</li>
+                <li>{{ t("faqView.thirdAnswer.iphone.eight") }}</li>
+                <li>{{ t("faqView.thirdAnswer.iphone.nine") }}</li>
              </ol>
            </AccordionTab>
            <AccordionTab header="Android">
-              <p>{{ $t("faqView.thirdAnswer.android.description") }}</p>
+              <p>{{ t("faqView.thirdAnswer.android.description") }}</p>
            </AccordionTab>
            <AccordionTab header="Windows Phone">
-              <p>{{ $t("faqView.thirdAnswer.windows_phone.description") }}</p>
+              <p>{{ t("faqView.thirdAnswer.windows_phone.description") }}</p>
              <ol>
-                <li>{{ $t("faqView.thirdAnswer.windows_phone.one") }}</li>
-                <li>{{ $t("faqView.thirdAnswer.windows_phone.two") }}</li>
-                <li>{{ $t("faqView.thirdAnswer.windows_phone.three") }}</li>
-                <li>{{ $t("faqView.thirdAnswer.windows_phone.four") }}</li>
-                <li>{{ $t("faqView.thirdAnswer.windows_phone.five") }}</li>
-                <li>{{ $t("faqView.thirdAnswer.windows_phone.six") }}</li>
-                <li>{{ $t("faqView.thirdAnswer.windows_phone.seven") }}</li>
-                <li>{{ $t("faqView.thirdAnswer.windows_phone.eight") }}</li>
+                <li>{{ t("faqView.thirdAnswer.windows_phone.one") }}</li>
+                <li>{{ t("faqView.thirdAnswer.windows_phone.two") }}</li>
+                <li>{{ t("faqView.thirdAnswer.windows_phone.three") }}</li>
+                <li>{{ t("faqView.thirdAnswer.windows_phone.four") }}</li>
+                <li>{{ t("faqView.thirdAnswer.windows_phone.five") }}</li>
+                <li>{{ t("faqView.thirdAnswer.windows_phone.six") }}</li>
+                <li>{{ t("faqView.thirdAnswer.windows_phone.seven") }}</li>
+                <li>{{ t("faqView.thirdAnswer.windows_phone.eight") }}</li>
              </ol>
            </AccordionTab>
          </Accordion>
        </div>
      </div>
      <div class="grid my-2">
-        <div class="col">{{ $t("faqView.fourthQuestion") }}</div>
-        <div class="col">{{ $t("faqView.fourthAnswer") }}</div>
+        <div class="col">{{ t("faqView.fourthQuestion") }}</div>
+        <div class="col">{{ t("faqView.fourthAnswer") }}</div>
      </div>
      <div class="grid my-2">
-        <div class="col">{{ $t("faqView.fifthQuestion") }}</div>
-        <div class="col">{{ $t("faqView.fifthAnswer") }}</div>
+        <div class="col">{{ t("faqView.fifthQuestion") }}</div>
+        <div class="col">{{ t("faqView.fifthAnswer") }}</div>
      </div>
      <div class="grid my-2">
-        <div class="col my-2">{{ $t("faqView.sixthQuestion") }}</div>
-        <div class="col">{{ $t("faqView.sixthAnswer") }}</div>
+        <div class="col my-2">{{ t("faqView.sixthQuestion") }}</div>
+        <div class="col">{{ t("faqView.sixthAnswer") }}</div>
      </div>
      <div class="grid my-2">
-        <div class="col">{{ $t("faqView.seventhQuestion") }}</div>
-        <div class="col">{{ $t("faqView.seventhAnswer") }}</div>
+        <div class="col">{{ t("faqView.seventhQuestion") }}</div>
+        <div class="col">{{ t("faqView.seventhAnswer") }}</div>
      </div>
      <div class="grid my-2">
-        <div class="col">{{ $t("faqView.eighthQuestion") }}</div>
-        <div class="col">{{ $t("faqView.eighthAnswer") }}</div>
+        <div class="col">{{ t("faqView.eighthQuestion") }}</div>
+        <div class="col">{{ t("faqView.eighthAnswer") }}</div>
      </div>
      <div class="grid my-2">
-        <div class="col">{{ $t("faqView.ninthQuestion") }}</div>
+        <div class="col">{{ t("faqView.ninthQuestion") }}</div>
        <div class="col">
-          {{ $t("faqView.ninthAnswer") }}
+          {{ t("faqView.ninthAnswer") }}
          <a href="https://gitlab.dit.htwk-leipzig.de/htwk-software/htwkalender"
            >Gitlab</a
          >.
        </div>
      </div>
      <div class="grid my-2">
-        <div class="col">{{ $t("faqView.crossPromoQuestion") }}</div>
+        <div class="col">{{ t("faqView.crossPromoQuestion") }}</div>
        <div class="col">
-          {{ $t("faqView.crossPromo.teaser") }}
+          {{ t("faqView.crossPromo.teaser") }}
          <div class="flex flex-column gap-3 my-3">
            <Card
              v-for="promoPage in new Array('mensa', 'htwkarte')"
@ -267,13 +271,13 @@ along with this program.  If not, see <https://www.gnu.org/licenses/>.
                  />
                  <div class="flex flex-column gap-1">
                    <div>
-                      {{ $t("faqView.crossPromo." + promoPage + ".title") }}
+                      {{ t("faqView.crossPromo." + promoPage + ".title") }}
                    </div>
                    <div class="p-card-subtitle text-base">
                      <a
-                        :href="$t('faqView.crossPromo.' + promoPage + '.link')"
+                        :href="t('faqView.crossPromo.' + promoPage + '.link')"
                      >
-                        {{ $t("faqView.crossPromo." + promoPage + ".link") }}
+                        {{ t("faqView.crossPromo." + promoPage + ".link") }}
                      </a>
                    </div>
                  </div>
@ -281,7 +285,7 @@ along with this program.  If not, see <https://www.gnu.org/licenses/>.
              </template>
              <template #content>
                <p class="m-0">
-                  {{ $t("faqView.crossPromo." + promoPage + ".description") }}
+                  {{ t("faqView.crossPromo." + promoPage + ".description") }}
                </p>
              </template>
            </Card>
@ -289,7 +293,7 @@ along with this program.  If not, see <https://www.gnu.org/licenses/>.
        </div>
      </div>
      <p>
-        {{ $t("faqView.notFound") }}<br />
+        {{ t("faqView.notFound") }}<br />
        <a href="mailto:support@htwkalender.de">support@htwkalender.de</a>
      </p>
    </div>
--- a/frontend/src/view/create/AdditionalModules.vue
+++ b/frontend/src/view/create/AdditionalModules.vue
@ -20,6 +20,8 @@ along with this program.  If not, see <https://www.gnu.org/licenses/>.
 import moduleStore from "@/store/moduleStore";
 import { router } from "@/main";
 import AdditionalModuleTable from "@/components/AdditionalModuleTable.vue";
+import { useI18n } from "vue-i18n";
+const { t } = useI18n({ useScope: "global" });

 const store = moduleStore();

@ -36,7 +38,7 @@ async function nextStep() {
  <div class="flex flex-column align-items-center w-full mb-8">
    <div class="flex align-items-center justify-content-center">
      <h3>
-        {{ $t("additionalModules.subTitle") }}
+        {{ t("additionalModules.subTitle") }}
      </h3>
    </div>
    <div
@ -46,7 +48,7 @@ async function nextStep() {
        :disabled="store.isEmpty()"
        class="col-12 md:col-4 align-self-end"
        icon="pi pi-arrow-right"
-        :label="$t('additionalModules.nextStep')"
+        :label="t('additionalModules.nextStep')"
        @click="nextStep()"
      />
    </div>
@ -58,7 +60,7 @@ async function nextStep() {
        class="col-12 md:col-4 mb-3 align-self-end"
        severity="secondary"
        icon="pi pi-arrow-up"
-        :label="$t('additionalModules.scrollToTop')"
+        :label="t('additionalModules.scrollToTop')"
        @click="topFunction()"
      />
    </div>
--- a/frontend/src/view/create/RenameModules.vue
+++ b/frontend/src/view/create/RenameModules.vue
@ -83,7 +83,7 @@ async function finalStep() {
 <template>
  <div class="flex flex-column align-items-center mb-7">
    <div class="flex align-items-center justify-content-center m-2 gap-2">
-      <h3>{{ $t("renameModules.subTitle") }}</h3>
+      <h3>{{ t("renameModules.subTitle") }}</h3>
      <ModuleTemplateDialog />
    </div>
    <div class="w-full lg:w-8 flex flex-column">
@ -100,7 +100,7 @@ async function finalStep() {
            <div
              class="flex align-items-center justify-content-end flex-wrap gap-2 px-2"
            >
-              {{ $t("renameModules.enableAllNotifications") }}
+              {{ t("renameModules.enableAllNotifications") }}
              <InputSwitch
                :model-value="
                  tableData.reduce(
@ -181,7 +181,7 @@ async function finalStep() {
        :disabled="store.isEmpty() || requestIsPending"
        class="col-12 md:col-4 mb-3 align-self-end"
        :icon="requestIsPending ? 'pi pi-spin pi-spinner' : 'pi pi-save'"
-        :label="$t('renameModules.nextStep')"
+        :label="t('renameModules.nextStep')"
        @click="finalStep()"
      />
    </div>
--- a/frontend/src/view/edit/EditAdditionalModules.vue
+++ b/frontend/src/view/edit/EditAdditionalModules.vue
@ -20,6 +20,8 @@ along with this program.  If not, see <https://www.gnu.org/licenses/>.
 import { defineAsyncComponent } from "vue";
 import moduleStore from "@/store/moduleStore";
 import { router } from "@/main";
+import { useI18n } from "vue-i18n";
+const { t } = useI18n({ useScope: "global" });

 const store = moduleStore();
 const AdditionalModuleTable = defineAsyncComponent(
@ -35,7 +37,7 @@ async function nextStep() {
  <div class="flex flex-column align-items-center w-full mb-7">
    <div class="flex align-items-center justify-content-center m-2">
      <h3>
-        {{ $t("additionalModules.subTitle") }}
+        {{ t("additionalModules.subTitle") }}
      </h3>
    </div>
    <AdditionalModuleTable />
@ -46,7 +48,7 @@ async function nextStep() {
        :disabled="store.isEmpty()"
        class="col-12 md:col-4 mb-3 align-self-end"
        icon="pi pi-arrow-right"
-        :label="$t('additionalModules.nextStep')"
+        :label="t('additionalModules.nextStep')"
        @click="nextStep()"
      />
    </div>
--- a/frontend/src/view/edit/EditCalendar.vue
+++ b/frontend/src/view/edit/EditCalendar.vue
@ -91,11 +91,11 @@ function loadCalendar(): void {
 <template>
  <DynamicPage
    hide-content
-    :headline="$t('editCalendarView.headline')"
-    :sub-title="$t('editCalendarView.subTitle')"
+    :headline="t('editCalendarView.headline')"
+    :sub-title="t('editCalendarView.subTitle')"
    icon="pi pi-pencil"
    :button="{
-      label: $t('editCalendarView.loadCalendar'),
+      label: t('editCalendarView.loadCalendar'),
      icon: 'pi pi-arrow-down',
      disabled: !isToken(token),
      onClick: loadCalendar,
--- a/frontend/src/view/edit/EditModules.vue
+++ b/frontend/src/view/edit/EditModules.vue
@ -107,7 +107,7 @@ async function deleteFeed() {
 <template>
  <div class="flex flex-column align-items-center mb-7">
    <div class="flex align-items-center justify-content-center m-2 gap-2">
-      <h3>{{ $t("renameModules.subTitle") }}</h3>
+      <h3>{{ t("renameModules.subTitle") }}</h3>
      <ModuleTemplateDialog />
    </div>
    <div class="w-full lg:w-8 flex flex-column">
@ -122,7 +122,7 @@ async function deleteFeed() {
        >
          <template #header>
            <div class="flex align-items-center justify-content-end">
-              {{ $t("renameModules.enableAllNotifications") }}
+              {{ t("renameModules.enableAllNotifications") }}
              <InputSwitch
                class="mx-4"
                :model-value="
@ -219,7 +219,7 @@ async function deleteFeed() {
                severity="danger"
                outlined
                icon="pi pi-trash"
-                :label="$t('editCalendarView.delete')"
+                :label="t('editCalendarView.delete')"
                @click="visible = true"
              />
              <Button
@ -227,7 +227,7 @@ async function deleteFeed() {
                severity="info"
                outlined
                icon="pi pi-plus"
-                :label="$t('editCalendarView.addModules')"
+                :label="t('editCalendarView.addModules')"
                @click="router.push('edit-additional-modules')"
              />
              <Button
@ -235,7 +235,7 @@ async function deleteFeed() {
                severity="success"
                outlined
                icon="pi pi-save"
-                :label="$t('editCalendarView.save')"
+                :label="t('editCalendarView.save')"
                @click="finalStep()"
              />
            </div>
@ -257,14 +257,14 @@ async function deleteFeed() {
          class="inline-flex align-items-center justify-content-center gap-2"
        >
          <span class="font-bold white-space-nowrap">{{
-            $t("editCalendarView.dialog.headline")
+            t("editCalendarView.dialog.headline")
          }}</span>
        </div>
      </template>
-      <p class="m-0">{{ $t("editCalendarView.dialog.subTitle") }}</p>
+      <p class="m-0">{{ t("editCalendarView.dialog.subTitle") }}</p>
      <template #footer>
        <Button
-          :label="$t('editCalendarView.dialog.delete')"
+          :label="t('editCalendarView.dialog.delete')"
          severity="danger"
          icon="pi pi-trash"
          autofocus
--- a/frontend/src/view/rooms/FreeRooms.vue
+++ b/frontend/src/view/rooms/FreeRooms.vue
@ -19,11 +19,11 @@ along with this program.  If not, see <https://www.gnu.org/licenses/>.
 <template>
  <DynamicPage
    :hide-content="availableRooms.length === 0"
-    :headline="$t('freeRooms.freeRooms')"
-    :sub-title="$t('freeRooms.detail')"
+    :headline="t('freeRooms.freeRooms')"
+    :sub-title="t('freeRooms.detail')"
    icon="pi pi-search"
    :button="{
-      label: $t('freeRooms.search'),
+      label: t('freeRooms.search'),
      icon: 'pi pi-search',
      disabled: isLater,
      onClick: loadFreeRooms,
@ -33,8 +33,8 @@ along with this program.  If not, see <https://www.gnu.org/licenses/>.
      <Calendar
        v-model="date"
        :class="flexSpecs"
-        :placeholder="$t('freeRooms.pleaseSelectDate')"
-        :empty-message="$t('roomFinderPage.noRoomsAvailable')"
+        :placeholder="t('freeRooms.pleaseSelectDate')"
+        :empty-message="t('roomFinderPage.noRoomsAvailable')"
        date-format="dd.mm.yy"
        panel-class="min-w-min"
        touch-u-i
@ -118,13 +118,13 @@ along with this program.  If not, see <https://www.gnu.org/licenses/>.
        :rows="10"
        :global-filter-fields="['room']"
      >
-        <Column field="room" :sortable="true" :header="$t('freeRooms.room')">
+        <Column field="room" :sortable="true" :header="t('freeRooms.room')">
          <template #filter="{ filterModel, filterCallback }">
            <InputText
              v-model="filterModel.value"
              type="text"
              class="p-column-filter"
-              :placeholder="$t('freeRooms.searchByRoom')"
+              :placeholder="t('freeRooms.searchByRoom')"
              @input="filterCallback()"
            />
          </template>
@ -136,7 +136,7 @@ along with this program.  If not, see <https://www.gnu.org/licenses/>.
                {{ slotProps.data.room }}
              </p>
              <Button
-                :label="$t('freeRooms.viewOccupancy')"
+                :label="t('freeRooms.viewOccupancy')"
                icon="pi pi-hourglass"
                class="p-button-rounded p-button-outlined sm:align-self-center align-self-end"
                @click="occupationRoute(slotProps.data.room)"
@ -158,6 +158,9 @@ import { padStart } from "@fullcalendar/core/internal";
 import { router } from "@/main";
 import { formatYearMonthDay } from "@/helpers/dates";

+import { useI18n } from "vue-i18n";
+const { t } = useI18n({ useScope: "global" });
+
 const mobilePage = inject("mobilePage") as Ref<boolean>;
 const filters = ref({
  room: { value: null, matchMode: FilterMatchMode.CONTAINS, label: "Room" },
--- a/frontend/src/view/rooms/RoomFinder.vue
+++ b/frontend/src/view/rooms/RoomFinder.vue
@ -123,8 +123,8 @@ const button = computed(() => {
 <template>
  <DynamicPage
    :hide-content="selectedRoom.name === ''"
-    :headline="$t('roomFinderPage.headline')"
-    :sub-title="$t('roomFinderPage.detail')"
+    :headline="t('roomFinderPage.headline')"
+    :sub-title="t('roomFinderPage.detail')"
    icon="pi pi-search"
    :lower-button="button"
  >
@ -135,8 +135,8 @@ const button = computed(() => {
        class="flex-1 m-0"
        filter
        option-label="name"
-        :placeholder="$t('roomFinderPage.dropDownSelect')"
-        :empty-message="$t('roomFinderPage.noRoomsAvailable')"
+        :placeholder="t('roomFinderPage.dropDownSelect')"
+        :empty-message="t('roomFinderPage.noRoomsAvailable')"
        :auto-filter-focus="true"
      />
    </template>
@ -145,7 +145,7 @@ const button = computed(() => {
    </template>
      <Button
        class="col-12 md:col-4 mt-3"
-        :label="$t('roomFinderPage.reset')"
+        :label="t('roomFinderPage.reset')"
        @click="selectedRoom.name = ''"
      />
  </DynamicPage>