From 24f933fbaa1ed88df441106db714871aae9d45e2 Mon Sep 17 00:00:00 2001
From: Pascal Syma <p.syma@appfarms.com>
Date: Thu, 14 Aug 2025 19:56:49 +0200
Subject: [PATCH] Use composition for translation

---
 app/components/LangSwitcher.vue               |  6 +--
 app/components/TeamAddModal.vue               |  3 +-
 app/components/TeamJoinModal.vue              |  3 +-
 app/components/admin/Team.vue                 |  4 +-
 app/layouts/default.vue                       |  8 ++--
 .../hunt/[huntSlug]/[questSlug]/index.vue     | 16 +++----
 app/pages/hunt/[huntSlug]/admin.vue           |  4 +-
 app/pages/hunt/[huntSlug]/index.vue           | 15 ++++--
 app/pages/hunt/[huntSlug]/showcase.vue        | 47 ++++++++++---------
 app/pages/index.vue                           | 44 ++++++++---------
 app/pages/login.vue                           | 25 +++++-----
 app/pages/register.vue                        | 35 +++++++-------
 12 files changed, 111 insertions(+), 99 deletions(-)

diff --git a/app/components/LangSwitcher.vue b/app/components/LangSwitcher.vue
index 5ed038a..97bcf67 100644
--- a/app/components/LangSwitcher.vue
+++ b/app/components/LangSwitcher.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-const { locale, locales } = useI18n();
+const { locale, locales, t } = useI18n();
 
 const availableLocales = computed(() => {
   return locales.value.filter((i) => i.code !== locale.value);
@@ -15,12 +15,12 @@ function l(locale: (typeof locales.value)[0]) {
     v-for="loc in availableLocales"
     :key="loc.code"
     :to="$switchLocalePath(loc.code)"
-    :title="$t('layouts.switch_lang', { locale: $t(`locales.${l(loc)}`) })"
+    :title="t('layouts.switch_lang', { locale: t(`locales.${l(loc)}`) })"
   >
     <VaSidebarItemContent>
       <VaIcon name="language" />
       <VaSidebarItemTitle>
-        {{ $t('layouts.switch_lang', { locale: $t(`locales.${l(loc)}`) }) }}
+        {{ t('layouts.switch_lang', { locale: t(`locales.${l(loc)}`) }) }}
       </VaSidebarItemTitle>
     </VaSidebarItemContent>
   </VaSidebarItem>
diff --git a/app/components/TeamAddModal.vue b/app/components/TeamAddModal.vue
index 877f6a3..3f58d06 100644
--- a/app/components/TeamAddModal.vue
+++ b/app/components/TeamAddModal.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { parseError } from '#shared/utils/error';
 
+const { t } = useI18n();
 const emits = defineEmits<{
   update: [];
 }>();
@@ -62,7 +63,7 @@ async function submit() {
         placeholder="The best team!"
       />
       <p>An invite code will be generated automatically.</p>
-      <VaAlert color="danger" v-if="error">{{ $t(error) }}</VaAlert>
+      <VaAlert color="danger" v-if="error">{{ t(error) }}</VaAlert>
     </div>
     <template #footer>
       <VaButtonGroup :loading="pending" :disabled="pending">
diff --git a/app/components/TeamJoinModal.vue b/app/components/TeamJoinModal.vue
index b0130d9..2254aa2 100644
--- a/app/components/TeamJoinModal.vue
+++ b/app/components/TeamJoinModal.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { parseError } from '#shared/utils/error';
 
+const { t } = useI18n();
 const emits = defineEmits<{
   update: [];
 }>();
@@ -103,7 +104,7 @@ async function submit() {
         </template>
       </VaInput>
 
-      <VaAlert color="danger" v-if="error">{{ $t(error) }}</VaAlert>
+      <VaAlert color="danger" v-if="error">{{ t(error) }}</VaAlert>
     </div>
     <template #footer>
       <VaButtonGroup
diff --git a/app/components/admin/Team.vue b/app/components/admin/Team.vue
index 6560ef8..bb43ef6 100644
--- a/app/components/admin/Team.vue
+++ b/app/components/admin/Team.vue
@@ -3,7 +3,7 @@ import type { Team } from '~/pages/hunt/[huntSlug]/teams.vue';
 
 const { confirm } = useModal();
 const { init } = useToast();
-const { t } = useI18n();
+const { t, d } = useI18n();
 
 const props = defineProps<{
   team: Team;
@@ -163,7 +163,7 @@ async function deleteTeam() {
       <p>
         Created at:
         {{
-          $d(team.createdAt, {
+          d(team.createdAt, {
             dateStyle: 'medium',
             timeStyle: 'medium'
           })
diff --git a/app/layouts/default.vue b/app/layouts/default.vue
index fc9f92f..37b150c 100644
--- a/app/layouts/default.vue
+++ b/app/layouts/default.vue
@@ -2,7 +2,7 @@
 import { useTitleStore } from '~/stores/title';
 
 const { loggedIn, clear, user } = useUserSession();
-
+const { t } = useI18n();
 const route = useRoute();
 const breakpoints = useBreakpoint();
 const titleStore = useTitleStore();
@@ -33,7 +33,7 @@ const slugs = computed(() => checkSlug(route.params));
           />
         </template>
         <template #center>
-          {{ titleStore.title || $t('layouts.default_tile') }}</template
+          {{ titleStore.title || t('layouts.default_tile') }}</template
         >
       </VaNavbar>
     </template>
@@ -159,7 +159,7 @@ const slugs = computed(() => checkSlug(route.params));
           <VaSidebarItemContent>
             <VaIcon name="logout" />
             <VaSidebarItemTitle>
-              {{ $t('auth.logout') }}
+              {{ t('auth.logout') }}
             </VaSidebarItemTitle>
           </VaSidebarItemContent>
         </VaSidebarItem>
@@ -167,7 +167,7 @@ const slugs = computed(() => checkSlug(route.params));
           <VaSidebarItemContent>
             <VaIcon name="login" />
             <VaSidebarItemTitle>
-              {{ $t('auth.login') }}
+              {{ t('auth.login') }}
             </VaSidebarItemTitle>
           </VaSidebarItemContent>
         </VaSidebarItem>
diff --git a/app/pages/hunt/[huntSlug]/[questSlug]/index.vue b/app/pages/hunt/[huntSlug]/[questSlug]/index.vue
index 5a62248..b24fc59 100644
--- a/app/pages/hunt/[huntSlug]/[questSlug]/index.vue
+++ b/app/pages/hunt/[huntSlug]/[questSlug]/index.vue
@@ -11,7 +11,7 @@ const app = useNuxtApp();
 const { user } = useUserSession();
 const { huntSlug, questSlug } = app.$slugData;
 
-const { t, locale } = useI18n();
+const { t, locale, d } = useI18n();
 
 const titleStore = useTitleStore();
 
@@ -110,7 +110,7 @@ const createImageURL = (file: File) => URL.createObjectURL(file);
       icon="refresh"
       :loading="pending"
       color="success"
-      >{{ $t('layouts.refresh') }}</VaButton
+      >{{ t('layouts.refresh') }}</VaButton
     >
     <VaButton
       v-if="user && user.role === 'ADMIN'"
@@ -146,7 +146,7 @@ const createImageURL = (file: File) => URL.createObjectURL(file);
               {{ data.textRequired ? '❓' : '❔' }}: {{ data.question }}
             </p>
             <p v-if="data.question">
-              🖋: {{ $t(`enums.text_type.${data.textType}`) }}
+              🖋: {{ t(`enums.text_type.${data.textType}`) }}
             </p>
             <p v-if="data.extraText">
               <span class="uppercase">Extra points:</span> {{ data.extraText }}
@@ -163,7 +163,7 @@ const createImageURL = (file: File) => URL.createObjectURL(file);
             <span v-if="data.answer.review.reviewer" class="text-sm">
               by {{ data.answer.review.reviewer.name }} at
               {{
-                $d(data.answer.updatedAt, {
+                d(data.answer.updatedAt, {
                   dateStyle: 'medium',
                   timeStyle: 'medium'
                 })
@@ -193,7 +193,7 @@ const createImageURL = (file: File) => URL.createObjectURL(file);
               clearable-icon="replay"
               :type="textType[data.textType]"
               :messages="[
-                $t(`enums.text_type.${data.textType}`),
+                t(`enums.text_type.${data.textType}`),
                 data.textRequired ? 'Required Answer' : undefined
               ]"
             >
@@ -227,7 +227,7 @@ const createImageURL = (file: File) => URL.createObjectURL(file);
             <p v-if="data.answer?.updatedAt">
               Last update:
               {{
-                $d(
+                d(
                   data.answer.updatedAt,
                   {
                     dateStyle: 'medium',
@@ -249,7 +249,7 @@ const createImageURL = (file: File) => URL.createObjectURL(file);
               v-if="submitError.length > 0"
               color="danger"
               class="w-full text-center"
-              >{{ $t(submitError) }}</VaAlert
+              >{{ t(submitError) }}</VaAlert
             >
             <VaButton
               v-if="!data.answer?.final"
@@ -273,7 +273,7 @@ const createImageURL = (file: File) => URL.createObjectURL(file);
     </div>
   </div>
   <div v-if="error" class="mt-8 text-3xl">
-    {{ $t(parseError(error)) }}
+    {{ t(parseError(error)) }}
   </div>
 </template>
 
diff --git a/app/pages/hunt/[huntSlug]/admin.vue b/app/pages/hunt/[huntSlug]/admin.vue
index 0f9bbdd..4e235f2 100644
--- a/app/pages/hunt/[huntSlug]/admin.vue
+++ b/app/pages/hunt/[huntSlug]/admin.vue
@@ -9,7 +9,7 @@ definePageMeta({
 const app = useNuxtApp();
 const { loggedIn } = useUserSession();
 const localePath = useLocalePath();
-const { t } = useI18n();
+const { t, d } = useI18n();
 const router = useRouter();
 
 const { confirm } = useModal();
@@ -227,7 +227,7 @@ async function addUser() {
     <p>
       Last update:
       {{
-        $d(data.updatedAt, {
+        d(data.updatedAt, {
           dateStyle: 'medium',
           timeStyle: 'medium'
         })
diff --git a/app/pages/hunt/[huntSlug]/index.vue b/app/pages/hunt/[huntSlug]/index.vue
index c5433ac..af90ad7 100644
--- a/app/pages/hunt/[huntSlug]/index.vue
+++ b/app/pages/hunt/[huntSlug]/index.vue
@@ -5,7 +5,7 @@ import { useTitleStore } from '~/stores/title';
 const app = useNuxtApp();
 const { loggedIn } = useUserSession();
 const localePath = useLocalePath();
-const { t } = useI18n();
+const { t, d } = useI18n();
 
 const { name, id } = app.$slugData.huntSlug!;
 
@@ -43,6 +43,12 @@ async function invite() {
 <template>
   <h1 class="text-2xl">
     {{ data?.name || name }}
+    <VaButton
+      icon="replay"
+      @click="refresh"
+      :disabled="pending"
+      title="Refresh"
+    />
     <VaButtonGroup v-if="data?.isMember">
       <VaButton
         color="danger"
@@ -78,7 +84,7 @@ async function invite() {
     <p v-if="data.start">
       Start:
       {{
-        $d(data.start, {
+        d(data.start, {
           dateStyle: 'medium',
           timeStyle: 'medium'
         })
@@ -87,7 +93,7 @@ async function invite() {
     <p v-if="data.end">
       End:
       {{
-        $d(data.end, {
+        d(data.end, {
           dateStyle: 'medium',
           timeStyle: 'medium'
         })
@@ -176,6 +182,7 @@ async function invite() {
         <VaCardActions v-if="data.isMember">
           <VaButton
             color="danger"
+            :icon="(quest.unreviewed || 0) > 0 ? 'priority_high' : undefined"
             :to="$localePath(`/hunt/${sluggy(data)}/${sluggy(quest)}/admin`)"
             >Admin ({{ quest.unreviewed || 0 }} unreviewed)</VaButton
           >
@@ -192,7 +199,7 @@ async function invite() {
   </div>
 
   <div v-if="error">
-    <h1 class="mt-8 text-3xl">{{ $t(parseError(error)) }}</h1>
+    <h1 class="mt-8 text-3xl">{{ t(parseError(error)) }}</h1>
     <VaButton icon="arrow_back" :to="$localePath(`/`)">Back home</VaButton>
   </div>
 </template>
diff --git a/app/pages/hunt/[huntSlug]/showcase.vue b/app/pages/hunt/[huntSlug]/showcase.vue
index a65d97a..5b81a04 100644
--- a/app/pages/hunt/[huntSlug]/showcase.vue
+++ b/app/pages/hunt/[huntSlug]/showcase.vue
@@ -7,6 +7,7 @@ definePageMeta({
   // middleware: ['admin'],
   layout: 'full'
 });
+const { t, d } = useI18n();
 
 const app = useNuxtApp();
 const { name, id } = app.$slugData.huntSlug!;
@@ -51,18 +52,18 @@ const columns = leaderboardColumns.map((c) =>
       <div
         class="flex flex-col items-center justify-center gap-8 bg-green-300 text-center"
       >
-        <h1 class="text-7xl">{{ $t('page.showcase.showcase_for') }}</h1>
+        <h1 class="text-7xl">{{ t('page.showcase.showcase_for') }}</h1>
         <h1 class="text-9xl font-bold">{{ data.name || name }}</h1>
         <p v-if="data.start || data.end" class="flex flex-row gap-4 text-4xl">
           <span v-if="data.start">{{
-            $d(data.start, {
+            d(data.start, {
               dateStyle: 'medium',
               timeStyle: 'medium'
             })
           }}</span
           ><span v-if="data.start && data.end"> – </span
           ><span v-if="data.end">{{
-            $d(data.end, {
+            d(data.end, {
               dateStyle: 'medium',
               timeStyle: 'medium'
             })
@@ -73,32 +74,32 @@ const columns = leaderboardColumns.map((c) =>
     <section id="numbers">
       <div class="grid grid-cols-3 gap-4 bg-red-100 p-4">
         <NumberCard
-          :title="$t('page.showcase.crew')"
+          :title="t('page.showcase.crew')"
           :count="data._count.members + 1"
           icon="support_agent"
         />
         <NumberCard
-          :title="$t('page.showcase.quests')"
+          :title="t('page.showcase.quests')"
           :count="data._count.quests"
           icon="home"
         />
         <NumberCard
-          :title="$t('page.showcase.users')"
+          :title="t('page.showcase.users')"
           :count="data.userCount"
           icon="person"
         />
         <NumberCard
-          :title="$t('page.showcase.teams')"
+          :title="t('page.showcase.teams')"
           :count="data._count.teams"
           icon="groups"
         />
         <NumberCard
-          :title="$t('page.showcase.total_points')"
+          :title="t('page.showcase.total_points')"
           :count="data.totalScore"
           icon="star"
         />
         <NumberCard
-          :title="$t('page.showcase.pictures')"
+          :title="t('page.showcase.pictures')"
           :count="data.pictureCount"
           icon="photo"
         />
@@ -141,7 +142,7 @@ const columns = leaderboardColumns.map((c) =>
     <section id="leaderboard" v-if="data.leaderboard.length > 3">
       <div class="flex flex-col gap-4 bg-indigo-100">
         <h1 class="mt-8 text-center text-6xl">
-          {{ $t('page.showcase.leaderboard') }}
+          {{ t('page.showcase.leaderboard') }}
         </h1>
         <VaDataTable
           class="h-full text-2xl"
@@ -152,7 +153,7 @@ const columns = leaderboardColumns.map((c) =>
           :columns="leaderboardColumns"
         >
           <template v-for="col in columns" #[col]
-            ><span>{{ $t(`page.showcase.table.${col}`) }}</span></template
+            ><span>{{ t(`page.showcase.table.${col}`) }}</span></template
           >
           <template #cell(place)="{ rowIndex }">
             <strong>{{ rowIndex + 4 }}</strong>
@@ -164,18 +165,18 @@ const columns = leaderboardColumns.map((c) =>
       <div class="place bg-[#AD8A56]">
         <div class="place-left">
           <VaIcon name="looks_3" size="10rem" />
-          <h2>{{ $t('page.showcase.third_place') }}</h2>
+          <h2>{{ t('page.showcase.third_place') }}</h2>
         </div>
         <div class="place-right">
           <h3>{{ data.leaderboard[2].name }}</h3>
           <p>{{ data.leaderboard[2].description }}</p>
           <NumberCard
-            :title="$t('page.showcase.points')"
+            :title="t('page.showcase.points')"
             :count="data.leaderboard[2].score"
             icon="star"
           />
           <NumberCard
-            :title="$t('page.showcase.answers')"
+            :title="t('page.showcase.answers')"
             :count="data.leaderboard[2].answers"
             icon="question_mark"
           />
@@ -186,18 +187,18 @@ const columns = leaderboardColumns.map((c) =>
       <div class="place bg-[#B4B4B4]">
         <div class="place-left">
           <VaIcon name="looks_two" size="10rem" />
-          <h2>{{ $t('page.showcase.second_place') }}</h2>
+          <h2>{{ t('page.showcase.second_place') }}</h2>
         </div>
         <div class="place-right">
           <h3>{{ data.leaderboard[1].name }}</h3>
           <p>{{ data.leaderboard[1].description }}</p>
           <NumberCard
-            :title="$t('page.showcase.points')"
+            :title="t('page.showcase.points')"
             :count="data.leaderboard[1].score"
             icon="star"
           />
           <NumberCard
-            :title="$t('page.showcase.answers')"
+            :title="t('page.showcase.answers')"
             :count="data.leaderboard[1].answers"
             icon="question_mark"
           />
@@ -208,7 +209,7 @@ const columns = leaderboardColumns.map((c) =>
       <div class="place bg-[#C9B037]">
         <div class="place-left">
           <VaIcon name="looks_one" size="10rem" />
-          <h2>{{ $t('page.showcase.first_place') }}</h2>
+          <h2>{{ t('page.showcase.first_place') }}</h2>
         </div>
         <div class="place-right">
           <h3 class="bg-white text-white">{{ data.leaderboard[0].name }}</h3>
@@ -216,12 +217,12 @@ const columns = leaderboardColumns.map((c) =>
             {{ data.leaderboard[0].description }}
           </p>
           <NumberCard
-            :title="$t('page.showcase.points')"
+            :title="t('page.showcase.points')"
             :count="data.leaderboard[0].score"
             icon="star"
           />
           <NumberCard
-            :title="$t('page.showcase.answers')"
+            :title="t('page.showcase.answers')"
             :count="data.leaderboard[0].answers"
             icon="question_mark"
           />
@@ -232,18 +233,18 @@ const columns = leaderboardColumns.map((c) =>
       <div class="place bg-[#C9B037]">
         <div class="place-left">
           <VaIcon name="workspace_premium" size="10rem" />
-          <h2>{{ $t('page.showcase.first_place') }}</h2>
+          <h2>{{ t('page.showcase.first_place') }}</h2>
         </div>
         <div class="place-right">
           <h3>{{ data.leaderboard[0].name }}</h3>
           <p>{{ data.leaderboard[0].description }}</p>
           <NumberCard
-            :title="$t('page.showcase.points')"
+            :title="t('page.showcase.points')"
             :count="data.leaderboard[0].score"
             icon="star"
           />
           <NumberCard
-            :title="$t('page.showcase.answers')"
+            :title="t('page.showcase.answers')"
             :count="data.leaderboard[0].answers"
             icon="question_mark"
           />
diff --git a/app/pages/index.vue b/app/pages/index.vue
index 3d0602d..24f891f 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -1,20 +1,20 @@
 <script setup lang="ts">
 const { loggedIn } = useUserSession();
 const { data, pending, refresh } = await useFetch('/api/home');
-
+const { t, d } = useI18n();
 watch(loggedIn, () => refresh());
 </script>
 
 <template>
-  <h1 class="text-primary text-3xl">{{ $t('hello') }}</h1>
+  <h1 class="text-primary text-3xl">{{ t('hello') }}</h1>
   <VaButton icon="refresh" @click="refresh" :disabled="pending">{{
-    $t('layouts.refresh')
+    t('layouts.refresh')
   }}</VaButton>
 
   <div v-if="data">
     <div v-if="data.own !== null">
       <h2 class="my-4 text-2xl font-bold">
-        {{ $t('page.home.joined_hunts') }}
+        {{ t('page.home.joined_hunts') }}
       </h2>
       <div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
         <VaCard
@@ -35,11 +35,11 @@ watch(loggedIn, () => refresh());
             {{ hunt.description }}
             <VaDivider />
             <div class="flex flex-col gap-2">
-              <p>{{ $t('page.home.n_quests', hunt._count.quests) }}</p>
+              <p>{{ t('page.home.n_quests', hunt._count.quests) }}</p>
               <p v-if="hunt.start">
                 {{
-                  $t('page.home.start', {
-                    start: $d(hunt.start, {
+                  t('page.home.start', {
+                    start: d(hunt.start, {
                       dateStyle: 'medium',
                       timeStyle: 'medium'
                     })
@@ -48,35 +48,35 @@ watch(loggedIn, () => refresh());
               </p>
               <p v-if="hunt.end">
                 {{
-                  $t('page.home.end', {
-                    start: $d(hunt.end, {
+                  t('page.home.end', {
+                    start: d(hunt.end, {
                       dateStyle: 'medium',
                       timeStyle: 'medium'
                     })
                   })
                 }}
               </p>
-              <p>{{ $t('page.home.n_teams_joined', hunt._count.teams) }}</p>
+              <p>{{ t('page.home.n_teams_joined', hunt._count.teams) }}</p>
             </div>
           </VaCardContent>
         </VaCard>
         <VaCard v-if="data.own.length <= 0">
-          <VaCardTitle>{{ $t('page.home.no_hunt_joined') }}</VaCardTitle>
+          <VaCardTitle>{{ t('page.home.no_hunt_joined') }}</VaCardTitle>
           <VaCardContent>{{
-            $t('page.home.click_hunt_below_to_join')
+            t('page.home.click_hunt_below_to_join')
           }}</VaCardContent>
         </VaCard>
       </div>
     </div>
     <div v-else>
       <VaButton color="info" icon="login" :to="$localePath(`/login`)">{{
-        $t('page.home.login_first')
+        t('page.home.login_first')
       }}</VaButton>
     </div>
     <div class="mt-8">
       <VaDivider />
       <h2 class="my-4 text-2xl font-bold">
-        {{ $t('page.home.open_to_join') }}
+        {{ t('page.home.open_to_join') }}
       </h2>
       <div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
         <VaCard
@@ -95,11 +95,11 @@ watch(loggedIn, () => refresh());
             {{ hunt.description }}
             <VaDivider />
             <div class="flex flex-col gap-2">
-              <p>{{ $t('page.home.n_quests', hunt._count.quests) }}</p>
+              <p>{{ t('page.home.n_quests', hunt._count.quests) }}</p>
               <p v-if="hunt.start">
                 {{
-                  $t('page.home.start', {
-                    start: $d(hunt.start, {
+                  t('page.home.start', {
+                    start: d(hunt.start, {
                       dateStyle: 'medium',
                       timeStyle: 'medium'
                     })
@@ -108,21 +108,21 @@ watch(loggedIn, () => refresh());
               </p>
               <p v-if="hunt.end">
                 {{
-                  $t('page.home.end', {
-                    start: $d(hunt.end, {
+                  t('page.home.end', {
+                    start: d(hunt.end, {
                       dateStyle: 'medium',
                       timeStyle: 'medium'
                     })
                   })
                 }}
               </p>
-              <p>{{ $t('page.home.n_teams_joined', hunt._count.teams) }}</p>
+              <p>{{ t('page.home.n_teams_joined', hunt._count.teams) }}</p>
             </div>
           </VaCardContent>
         </VaCard>
         <VaCard v-if="data.others.length <= 0">
-          <VaCardTitle>{{ $t('page.home.no_hunt_created') }}</VaCardTitle>
-          <VaCardContent>{{ $t('page.home.new_hunts_soon') }}</VaCardContent>
+          <VaCardTitle>{{ t('page.home.no_hunt_created') }}</VaCardTitle>
+          <VaCardContent>{{ t('page.home.new_hunts_soon') }}</VaCardContent>
         </VaCard>
       </div>
     </div>
diff --git a/app/pages/login.vue b/app/pages/login.vue
index 670a712..8d9fafe 100644
--- a/app/pages/login.vue
+++ b/app/pages/login.vue
@@ -4,6 +4,7 @@ import { useForm } from 'vuestic-ui';
 definePageMeta({
   middleware: ['guest']
 });
+const { t } = useI18n();
 const { fetch } = useUserSession();
 const router = useRouter();
 const route = useRoute();
@@ -52,7 +53,7 @@ async function submit() {
 </script>
 
 <template>
-  <h1 class="mb-4 text-center text-3xl">{{ $t('auth.login') }}</h1>
+  <h1 class="mb-4 text-center text-3xl">{{ t('auth.login') }}</h1>
   <div class="grid grid-cols-1 sm:grid-cols-3 lg:grid-cols-5">
     <VaForm
       ref="formRef"
@@ -64,10 +65,10 @@ async function submit() {
         v-model="form.email"
         class="w-full"
         type="email"
-        :label="$t('auth.email')"
+        :label="t('auth.email')"
         autocomplete="email"
-        :rules="[validation.required($t('auth.email'))]"
-        :placeholder="$t('auth.email')"
+        :rules="[validation.required(t('auth.email'))]"
+        :placeholder="t('auth.email')"
         required
       >
         <template #prependInner>
@@ -79,11 +80,11 @@ async function submit() {
           v-model="form.password"
           class="w-full"
           :type="isPasswordVisible.value ? 'text' : 'password'"
-          :label="$t('auth.password')"
-          :placeholder="$t('auth.password')"
+          :label="t('auth.password')"
+          :placeholder="t('auth.password')"
           :rules="[
-            validation.required($t('auth.password')),
-            validation.min($t('auth.password'), 8)
+            validation.required(t('auth.password')),
+            validation.min(t('auth.password'), 8)
           ]"
           autocomplete="current-password"
           :minlength="8"
@@ -98,7 +99,7 @@ async function submit() {
               v-if="form.password"
               preset="plain"
               :title="
-                $t(
+                t(
                   isPasswordVisible.value
                     ? 'auth.hidePassword'
                     : 'auth.showPassword'
@@ -120,17 +121,17 @@ async function submit() {
         v-if="error.length > 0"
         color="danger"
         class="w-full text-center"
-        >{{ $t(error) }}</VaAlert
+        >{{ t(error) }}</VaAlert
       >
       <VaButtonGroup>
         <VaButton color="success" type="submit" :disabled="!isValid">{{
-          $t('auth.login')
+          t('auth.login')
         }}</VaButton>
         <VaButton
           :to="$localePath({ path: '/register', query: route.query })"
           border-color="primary"
           preset="secondary"
-          >{{ $t('auth.register_instead') }}</VaButton
+          >{{ t('auth.register_instead') }}</VaButton
         >
       </VaButtonGroup>
     </VaForm>
diff --git a/app/pages/register.vue b/app/pages/register.vue
index da03c27..8b4e50c 100644
--- a/app/pages/register.vue
+++ b/app/pages/register.vue
@@ -6,6 +6,7 @@ definePageMeta({
   middleware: ['guest']
 });
 const { fetch } = useUserSession();
+const { t } = useI18n();
 const router = useRouter();
 const route = useRoute();
 const localePath = useLocalePath();
@@ -54,7 +55,7 @@ async function submit() {
 </script>
 
 <template>
-  <h1 class="mb-4 text-center text-3xl">{{ $t('auth.login') }}</h1>
+  <h1 class="mb-4 text-center text-3xl">{{ t('auth.login') }}</h1>
   <div class="grid grid-cols-1 sm:grid-cols-3 lg:grid-cols-5">
     <VaForm
       ref="formRef"
@@ -69,14 +70,14 @@ async function submit() {
         autocomplete="name"
         clearable
         clear-value=""
-        :label="$t('auth.name')"
-        :placeholder="$t('auth.name')"
+        :label="t('auth.name')"
+        :placeholder="t('auth.name')"
         max-length="64"
         min-length="5"
         :rules="[
-          validation.required($t('auth.name')),
-          validation.max($t('auth.name'), 64),
-          validation.min($t('auth.name'), 5)
+          validation.required(t('auth.name')),
+          validation.max(t('auth.name'), 64),
+          validation.min(t('auth.name'), 5)
         ]"
         required
       >
@@ -95,10 +96,10 @@ async function submit() {
         v-model="form.email"
         class="w-full"
         type="email"
-        :label="$t('auth.email')"
+        :label="t('auth.email')"
         autocomplete="email"
-        :rules="[validation.required($t('auth.email'))]"
-        :placeholder="$t('auth.email')"
+        :rules="[validation.required(t('auth.email'))]"
+        :placeholder="t('auth.email')"
         required
       >
         <template #prependInner>
@@ -110,11 +111,11 @@ async function submit() {
           v-model="form.password"
           class="w-full"
           :type="isPasswordVisible.value ? 'text' : 'password'"
-          :label="$t('auth.password')"
-          :placeholder="$t('auth.password')"
+          :label="t('auth.password')"
+          :placeholder="t('auth.password')"
           :rules="[
-            validation.required($t('auth.password')),
-            validation.min($t('auth.password'), 8)
+            validation.required(t('auth.password')),
+            validation.min(t('auth.password'), 8)
           ]"
           autocomplete="current-password"
           :minlength="8"
@@ -129,7 +130,7 @@ async function submit() {
               v-if="form.password"
               preset="plain"
               :title="
-                $t(
+                t(
                   isPasswordVisible.value
                     ? 'auth.hidePassword'
                     : 'auth.showPassword'
@@ -151,18 +152,18 @@ async function submit() {
         v-if="error.length > 0"
         color="danger"
         class="w-full text-center"
-        >{{ $t(error) }}</VaAlert
+        >{{ t(error) }}</VaAlert
       >
 
       <VaButtonGroup>
         <VaButton color="success" type="submit" :disabled="!isValid">{{
-          $t('auth.register')
+          t('auth.register')
         }}</VaButton>
         <VaButton
           :to="$localePath({ path: '/login', query: route.query })"
           border-color="primary"
           preset="secondary"
-          >{{ $t('auth.login_instead') }}</VaButton
+          >{{ t('auth.login_instead') }}</VaButton
         >
       </VaButtonGroup>
     </VaForm>