i18n implemented

app/pages/users.vue

@@ -25,6 +25,8 @@ interface ListedUser {
   }
 }
 
+const { locale } = useI18n()
+
 const { data: users } = await useFetch<ListedUser[]>('/api/users', {
   key: 'users-list',
   default: () => [],
@@ -41,28 +43,28 @@ function cardBorderEffect(user: ListedUser): CardBorderEffectKey | null {
 const GRID_COLS = 'grid-cols-[2.5rem_minmax(0,1fr)_3rem_2.5rem_2.5rem] sm:grid-cols-[2.5rem_minmax(0,1fr)_3.5rem_4.5rem_4.5rem_10rem]'
 
 function joinDate(value: string) {
-  return new Intl.DateTimeFormat('de-DE', { dateStyle: 'medium' }).format(new Date(value))
+  return new Intl.DateTimeFormat(locale.value, { dateStyle: 'medium' }).format(new Date(value))
 }
 </script>
 
 <template>
   <div class="px-4 lg:px-6">
     <h1 class="mb-4 text-xl font-semibold">
-      Benutzer
+      {{ $t('nav.users') }}
     </h1>
 
     <p v-if="!users.length" class="text-sm text-muted-foreground">
-      Noch keine Benutzer.
+      {{ $t('misc.noUsers') }}
     </p>
 
     <div v-else class="max-w-4xl overflow-x-auto">
       <div :class="cn('grid items-center gap-3 px-3 py-2 text-xs text-muted-foreground', GRID_COLS)">
         <span />
-        <span>Name</span>
+        <span>{{ $t('common.name') }}</span>
         <span class="text-right">ID</span>
-        <span class="hidden text-right sm:block">Uploads</span>
-        <span class="hidden text-right sm:block">Kommentare</span>
-        <span class="hidden text-right sm:block">Dabei seit</span>
+        <span class="hidden text-right sm:block">{{ $t('misc.uploadsCol') }}</span>
+        <span class="hidden text-right sm:block">{{ $t('misc.commentsCol') }}</span>
+        <span class="hidden text-right sm:block">{{ $t('misc.joined') }}</span>
       </div>
 
       <div class="mt-1 flex flex-col gap-2">