blog/frontend/app/components/PaginationNav.vue

<script setup lang="ts">
import type { Locale } from '#shared/utils/locale'
import { STRINGS, interpolate } from '#shared/utils/i18n'
import { paginationRange } from '#shared/utils/pagination'

const props = defineProps<{ page: number; pageCount: number; locale: Locale }>()

const strings = computed(() => STRINGS[props.locale])
const items = computed(() => paginationRange(props.page, props.pageCount))
</script>

<template>
  <nav v-if="pageCount > 1" class="pagination" :aria-label="strings.blog.paginationAriaLabel">
    <!-- `custom` bypasses NuxtLink/RouterLink's own active-class and aria-current
         computation, which compares only the path, not the query string — every
         page link would otherwise be (wrongly) marked as the current page. -->
    <NuxtLink
      v-if="page > 1"
      v-slot="{ href, navigate }"
      :to="{ query: { page: page - 1 } }"
      custom
    >
      <a :href="href ?? undefined" class="pagination-arrow" rel="prev" :aria-label="strings.blog.prevPage" @click="navigate">
        <span aria-hidden="true">‹</span>
      </a>
    </NuxtLink>
    <span v-else class="pagination-arrow is-disabled" aria-hidden="true">‹</span>

    <ul class="pagination-list">
      <li v-for="(item, index) in items" :key="index">
        <span v-if="item === 'ellipsis'" class="pagination-ellipsis" aria-hidden="true">…</span>
        <span v-else-if="item === page" class="pagination-link is-current" aria-current="page">
          {{ item }}
        </span>
        <NuxtLink v-else v-slot="{ href, navigate }" :to="{ query: { page: item } }" custom>
          <a
            :href="href ?? undefined"
            class="pagination-link"
            :aria-label="interpolate(strings.blog.goToPage, { page: item })"
            @click="navigate"
          >
            {{ item }}
          </a>
        </NuxtLink>
      </li>
    </ul>

    <NuxtLink
      v-if="page < pageCount"
      v-slot="{ href, navigate }"
      :to="{ query: { page: page + 1 } }"
      custom
    >
      <a :href="href ?? undefined" class="pagination-arrow" rel="next" :aria-label="strings.blog.nextPage" @click="navigate">
        <span aria-hidden="true">›</span>
      </a>
    </NuxtLink>
    <span v-else class="pagination-arrow is-disabled" aria-hidden="true">›</span>

    <p class="sr-only" role="status">
      {{ interpolate(strings.blog.pageOf, { current: page, total: pageCount }) }}
    </p>
  </nav>
</template>

<style scoped>
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: var(--gap-section);
  padding-top: 2rem;
  border-top: 1px solid var(--color-border);
}

.pagination-list {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0;
  margin: 0;
  list-style: none;
}

.pagination-arrow,
.pagination-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 2rem;
  padding-inline: 0.4rem;
  border-radius: var(--radius);
  font-size: 0.85rem;
  text-decoration: none;
  color: var(--color-body);
}

.pagination-arrow {
  font-size: 1.1rem;
}

.pagination-arrow.is-disabled {
  color: var(--color-border);
}

.pagination-link:hover {
  background: var(--color-surface);
  color: var(--color-ink);
}

.pagination-arrow:not(.is-disabled):hover {
  background: var(--color-surface);
  color: var(--color-ink);
}

.pagination-link.is-current {
  background: var(--color-ink);
  color: var(--color-bg);
  font-weight: 600;
}

.pagination-ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  color: var(--color-muted);
}
</style>