Pagination

Accessible, unstyled Pagination primitive with controlled page state and SSR-stable ids.

Minimal setup

Use a Vue 3.5+ project with Vue SFC compilation configured (see Vite+ integration).

vp install @vizejs/ui

Add the public import below to <script setup lang="ts">. Components provide behavior without styles; the preview uses optional Paper styles.

import { Pagination, PaginationRoot, PaginationEllipsis, PaginationItem, PaginationList, PaginationNext, PaginationPage, PaginationPrevious } from "@vizejs/ui/pagination";

Or copy the source into your project with vize lib pull pagination (see Source Distribution).

Try it

This is the basic example maintained with the component source, using the public package imports. The preview adds the optional Paper styles.

Open the interactive example · Styling these components

Copy the example

<!-- Search results pagination bound with v-model that collapses distant pages into ellipses. -->
<script setup lang="ts">
import { ref } from "vue";

import {
  PaginationEllipsis,
  PaginationItem,
  PaginationList,
  PaginationNext,
  PaginationPage,
  PaginationPrevious,
  PaginationRoot,
} from "@vizejs/ui/pagination";

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

<template>
  <div>
    <p>Showing results {{ (page - 1) * 20 + 1 }}–{{ page * 20 }} of 240</p>
    <PaginationRoot v-slot="{ range }" v-model="page" :page-count="12" label="Search results pages">
      <PaginationList>
        <PaginationItem><PaginationPrevious>Previous</PaginationPrevious></PaginationItem>
        <template v-for="item in range" :key="item.key">
          <PaginationItem v-if="item.type === 'page'" :page="item.page">
            <PaginationPage :page="item.page">{{ item.page }}</PaginationPage>
          </PaginationItem>
          <PaginationItem v-else>
            <PaginationEllipsis :position="item.position" />
          </PaginationItem>
        </template>
        <PaginationItem><PaginationNext>Next</PaginationNext></PaginationItem>
      </PaginationList>
    </PaginationRoot>
  </div>
</template>

API

Pagination

Source: src/families/navigation/pagination/pagination.vue

Props

Events

Slots

Exposed

PaginationRoot

Source: src/families/navigation/pagination/pagination.vue

Props

Events

Slots

Exposed

PaginationEllipsis

Source: src/families/navigation/pagination/pagination-ellipsis.vue

Props

Slots

Exposed

PaginationItem

Source: src/families/navigation/pagination/pagination-item.vue

Props

Slots

Exposed

PaginationList

Source: src/families/navigation/pagination/pagination-list.vue

Props

Slots

Exposed

PaginationNext

Source: src/families/navigation/pagination/pagination-next.vue

Props

Events

Slots

Exposed

PaginationPage

Source: src/families/navigation/pagination/pagination-page.vue

Props

Events

Slots

Exposed

PaginationPrevious

Source: src/families/navigation/pagination/pagination-previous.vue

Props

Events

Slots

Exposed

Behavior

Normative state x input -> outcome table for pagination.vue, pagination-list.vue, pagination-item.vue, pagination-page.vue, pagination-previous.vue, pagination-next.vue, and pagination-ellipsis.vue (@vizejs/ui/pagination). Every row is proven by focused tests plus package export, family catalog, renderer, runtime conformance, and size-budget gates.

The primitive renders no styling. PaginationPage, PaginationPrevious, and PaginationNext are native buttons so keyboard activation follows the platform. PaginationPage uses aria-current="page" for the current page while keeping the current page focusable; root-disabled, boundary, and out-of-range controls use native disabled.