blog/frontend/app/components/views/CategoryView.vue

<script setup lang="ts">
import type { ArticleSummary, Category, Paginated } from '#shared/types/blog'
import type { Locale } from '#shared/utils/locale'
import { STRINGS, interpolate } from '#shared/utils/i18n'

const props = defineProps<{ locale: Locale }>()

const strings = computed(() => STRINGS[props.locale])

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 { data: category } = await useFetch<Category>(`/content/categories/${slug}`, {
  key: `category-${slug}-${props.locale}`,
  query: { lang: props.locale },
})

if (!category.value) {
  throw createError({ statusCode: 404, statusMessage: 'Category not found', fatal: true })
}

const { data, error } = await useFetch<Paginated<ArticleSummary>>('/content/articles', {
  key: () => `category-articles-${slug}-${props.locale}-${page.value}`,
  query: { page, category: slug, lang: props.locale },
})

useSeo({
  locale: props.locale,
  path: `/category/${slug}`,
  title: category.value.name,
  description: interpolate(strings.value.category.metaDescription, { name: category.value.name }),
})
</script>

<template>
  <div>
    <header class="page-header">
      <p class="kicker">{{ strings.category.kicker }}</p>
      <h1>{{ category?.name }}</h1>
    </header>

    <p v-if="error">{{ strings.category.loadError }}</p>

    <p v-else-if="!data?.items.length">{{ strings.category.empty }}</p>

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

      <PaginationNav :page="data.page" :page-count="data.pageCount" :locale="locale" />
    </template>
  </div>
</template>