Pagination

Pagination calculates a compact page range from total items and page size, then renders semantic navigation with current-page metadata, optional ellipses, and boundary controls. Controls can be buttons or real links.

Application code handles data fetching and URL state through v-model and getPageHref.

Anatomy

• #first: First-page control content.
• #previous: Previous-page control content.
• #page: Page control content with page number and active state.
• #ellipsis: Omitted-range marker with start/end side.
• #next: Next-page control content.
• #last: Last-page control content.
• #state: Optional renderless output with page, page count, visible items, and navigation action.

The component generates nav, list, page controls, current-page ARIA, and disabled boundary behavior. Style generated parts with ui.

Usage

<script setup lang="ts">
import { Pagination } from "akaza-ui";
import { ref } from "vue";

const page = ref(1);
</script>

<template>
  <Pagination
    v-model="page"
    :total="240"
    :items-per-page="10"
    show-edges
    show-first-last
  />
</template>

Examples

Visible siblings

siblingCount controls how many pages remain visible on each side of the current page. Without edges, Pagination renders a moving compact window.

<template>
  <Pagination v-model="page" :total="200" :items-per-page="10" :sibling-count="1" />
</template>

Edges and ellipses

Set showEdges to preserve first and last page numbers and insert ellipses around omitted ranges.

<template>
  <Pagination v-model="page" :total="500" show-edges />
</template>

First and last controls

Boundary controls are opt-in. Previous and next controls are enabled by default and can also be removed.

<template>
  <Pagination
    v-model="page"
    :total="500"
    show-first-last
    :show-previous-next="false"
  />
</template>

Real links

Return an href to render controls as anchors. Disabled boundary links prevent navigation and leave the tab order.

<template>
  <Pagination
    v-model="page"
    :total="500"
    :get-page-href="(value) => `/reports?page=${value}`"
  />
</template>

Cancel navigation

value-change fires before the model update, so pending forms or unsaved state can block a page change.

<template>
  <Pagination
    v-model="page"
    :total="500"
    @value-change="(_page, details) => {
      if (hasUnsavedChanges) details.cancel()
    }"
  />
</template>

API Reference

Model

Props

Emits

Slots

Methods

UI Options

Styling Hooks

Plain class applies to the nav root. Use ui.page and control-specific keys for generated controls.

Keyboard

Pagination uses native buttons or links. Tab moves through enabled controls; Enter and Space activate buttons, and Enter activates links. Boundary controls are disabled and removed from the tab order when they cannot move further.