Use composition for translation

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>