temp

frontend/app/pages/category/[slug].vue

@@ -9,14 +9,20 @@ const page = computed(() => {
   return Number.isInteger(value) && value > 0 ? value : 1
 })
 
-const { data: category } = await useFetch<Category>(`/api/categories/${slug}`)
+const { locale, t } = useLocale()
+
+const { data: category } = await useFetch<Category>(`/api/categories/${slug}`, {
+  key: () => `category-${slug}-${locale.value}`,
+  query: { lang: locale },
+})
 
 if (!category.value) {
   throw createError({ statusCode: 404, statusMessage: 'Category not found', fatal: true })
 }
 
 const { data, error } = await useFetch<Paginated<ArticleSummary>>('/api/articles', {
-  query: { page, category: slug },
+  key: () => `category-articles-${slug}-${locale.value}-${page.value}`,
+  query: { page, category: slug, lang: locale },
 })
 
 const { public: config } = useRuntimeConfig()
@@ -25,8 +31,8 @@ const canonical = computed(
 )
 
 useSeoMeta({
-  title: category.value.name,
-  description: () => `Tutti gli articoli nella categoria ${category.value?.name ?? ''}.`,
+  title: () => category.value?.name ?? '',
+  description: () => t('categoryDescription')(category.value?.name ?? ''),
   ogType: 'website',
 })
 
@@ -36,13 +42,13 @@ useHead({ link: [{ rel: 'canonical', href: canonical }] })
 <template>
   <div>
     <header class="page-header">
-      <p class="kicker">Categoria</p>
+      <p class="kicker">{{ t('categoryKicker') }}</p>
       <h1>{{ category?.name }}</h1>
     </header>
 
-    <p v-if="error">Non è stato possibile caricare gli articoli. Riprova più tardi.</p>
+    <p v-if="error">{{ t('loadError') }}</p>
 
-    <p v-else-if="!data?.items.length">Non ci sono articoli in questa categoria.</p>
+    <p v-else-if="!data?.items.length">{{ t('noArticlesInCategory') }}</p>
 
     <template v-else>
       <ul class="card-grid">
@@ -51,19 +57,19 @@ useHead({ link: [{ rel: 'canonical', href: canonical }] })
         </li>
       </ul>
 
-      <nav v-if="data.pageCount > 1" class="pagination" aria-label="Paginazione">
+      <nav v-if="data.pageCount > 1" class="pagination" :aria-label="t('pagination')">
         <NuxtLink v-if="data.page > 1" :to="{ query: { page: data.page - 1 } }" rel="prev">
-          Pagina precedente
+          {{ t('prevPage') }}
         </NuxtLink>
         <span class="muted">
-          Pagina {{ data.page }} di {{ data.pageCount }}
+          {{ t('pageOf')(data.page, data.pageCount) }}
         </span>
         <NuxtLink
           v-if="data.page < data.pageCount"
           :to="{ query: { page: data.page + 1 } }"
           rel="next"
         >
-          Pagina successiva
+          {{ t('nextPage') }}
         </NuxtLink>
       </nav>
     </template>