Pagination

Page list

Moving between pages of results. For a feed people read to the end, InfiniteScroll or a Load more button fits better; pages suit results people come back to or share.

Basic

• …
• …

• ‹
• 1
• 2
• 3
• 4
• 5
• …
• 12
• ›

page: 7

<script setup lang="ts">
import { ref } from "vue";
import { BlessPagination } from "blessing-ui";
const page = ref(7);
const short = ref(1);
const linked = ref(3);
</script>

<template>
  <div class="col" style="max-width: none">
    <BlessPagination v-model="page" :total="20" />
    <BlessPagination v-model="short" :total="5" />
    <BlessPagination
      v-model="linked"
      :total="12"
      :siblings="2"
      :href="(p: number) => `#page-${p}`"
    />
    <small>page: {{ page }}</small>
  </div>
</template>

• With href, pages are links (through your router when provided), so each page has a URL; without it they are buttons and v-model holds the page.
• siblings sets how many pages show either side of the current one; the rest collapse to ….
• The current page has aria-current="page"; prevLabel / nextLabel name the arrows.

Usage

import { BlessPagination } from "blessing-ui";

API

Props

Name	Type	Default	Description
total*	number	—
siblings	number	1	pages shown either side of current
label	string	"Pagination"
prevLabel	string	"Previous"
nextLabel	string	"Next"
href	((page: number) => string)	—	render <a href> using this fn instead of buttons
modelValue	number	1

Events

Name	Payload	Description
update:modelValue	[value: number]