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

<script setup lang="ts">
import type { ArticleSummary, Paginated, Category } from '#shared/types/blog'

const route = useRoute()
const slug = route.params.slug as string

const page = computed(() => {
  const value = Number(route.query.page)
  return Number.isInteger(value) && value > 0 ? value : 1
})

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', {
  key: () => `category-articles-${slug}-${locale.value}-${page.value}`,
  query: { page, category: slug, lang: locale },
})

const { public: config } = useRuntimeConfig()
const canonical = computed(
  () => `${config.siteUrl}${route.path}${page.value > 1 ? `?page=${page.value}` : ''}`
)

useSeoMeta({
  title: () => category.value?.name ?? '',
  description: () => t('categoryDescription')(category.value?.name ?? ''),
  ogType: 'website',
})

useHead({ link: [{ rel: 'canonical', href: canonical }] })
</script>

<template>
  <div>
    <header class="page-header">
      <p class="kicker">{{ t('categoryKicker') }}</p>
      <h1>{{ category?.name }}</h1>
    </header>

    <p v-if="error">{{ t('loadError') }}</p>

    <p v-else-if="!data?.items.length">{{ t('noArticlesInCategory') }}</p>

    <template v-else>
      <ul class="card-grid">
        <li v-for="article in data.items" :key="article.slug">
          <ArticleCard :article="article" />
        </li>
      </ul>

      <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">
          {{ t('prevPage') }}
        </NuxtLink>
        <span class="muted">
          {{ t('pageOf')(data.page, data.pageCount) }}
        </span>
        <NuxtLink
          v-if="data.page < data.pageCount"
          :to="{ query: { page: data.page + 1 } }"
          rel="next"
        >
          {{ t('nextPage') }}
        </NuxtLink>
      </nav>
    </template>
  </div>
</template>