Pagination

Navigate through pages of content.

1

2

3

4

5

···

10

<script setup lang="ts">
import { ref } from 'vue'
import { VxPagination } from 'veloxui'

const page = ref(1)
</script>

<template>
  <VxPagination v-model="page" :total="100" />
</template>

More Pages

When there are many pages, ellipsis buttons appear. Click them to jump multiple pages.

1

2

3

4

5

···

50

<VxPagination v-model="page" :total="500" />

With Total & Jumper

Use the layout prop to control which parts are shown and their order.

Total 200

1

2

3

4

5

···

20

Go to

<VxPagination
  v-model="page"
  :total="200"
  :layout="['total', 'prev', 'pager', 'next', 'jumper']"
/>

Page Size Selector

Add sizes to the layout and use v-model:pageSize to control items per page.

Total 500

10 / page

1

2

3

4

5

···

50

Go to

<script setup lang="ts">
import { ref } from 'vue'

const page = ref(1)
const pageSize = ref(10)
</script>

<template>
  <VxPagination
    v-model="page"
    v-model:pageSize="pageSize"
    :total="500"
    :layout="['total', 'sizes', 'prev', 'pager', 'next', 'jumper']"
  />
</template>

Simple Mode

A compact pagination with prev/next buttons and page indicator.

1/50

<VxPagination v-model="page" :total="500" simple />

Simple with Page Size

10 / page

1/50

<VxPagination v-model="page" v-model:pageSize="pageSize" :total="500" simple :layout="['sizes']" />

Slider Mode

A sliding window of page buttons. Click next/prev and the window slides along.

1

2

3

<VxPagination v-model="page" :total="200" slider />

Slider with Visible Pages

Control how many page buttons are visible with visiblePages.

1

2

3

1

2

3

4

5

1

2

3

4

5

6

7

<VxPagination v-model="page" :total="200" slider :visible-pages="3" />
<VxPagination v-model="page" :total="200" slider :visible-pages="5" />
<VxPagination v-model="page" :total="200" slider :visible-pages="7" />

Custom Page Format

Use pageFormat to customize how page numbers are displayed. Works in both default and slider modes.

01

02

03

04

05

···

20

01

02

03

04

05

<script setup lang="ts">
import { ref } from 'vue'

const page = ref(1)

function padPage(page: number) {
  return String(page).padStart(2, '0')
}
</script>

<template>
  <VxPagination v-model="page" :total="200" :page-format="padPage" />
  <VxPagination v-model="page" :total="200" slider :visible-pages="5" :page-format="padPage" />
</template>

Custom Prev/Next Buttons

Use #prev and #next slots to customize the navigation buttons.

1

2

3

4

5

···

20

<VxPagination v-model="page" :total="200">
  <template #prev>Prev</template>
  <template #next>Next</template>
</VxPagination>

Custom Page Slot

Use the #page slot for full control over each page button's content.

[ 1 ]

[ 2 ]

[ 3 ]

[ 4 ]

[ 5 ]

···

[ 10 ]

<VxPagination v-model="page" :total="100">
  <template #page="{ page }">
    <span style="font-family: monospace;">[ {{ page }} ]</span>
  </template>
</VxPagination>

Sizes

1

···

3

4

5

6

7

···

20

1

···

3

4

5

6

7

···

20

1

···

3

4

5

6

7

···

20

<VxPagination v-model="page" :total="200" size="sm" />
<VxPagination v-model="page" :total="200" />
<VxPagination v-model="page" :total="200" size="lg" />

Disabled

1

2

3

4

5

···

10

<VxPagination v-model="page" :total="100" disabled />

Hide on Single Page

When there's only one page, the pagination hides automatically.

Nothing above — only 1 page

<VxPagination v-model="page" :total="5" hide-on-single-page />

Custom Pager Count

Control how many page buttons are visible with pagerCount (must be odd, between 5 and 21).

1

2

3

···

100

<VxPagination v-model="page" :total="1000" :pager-count="5" />

Full Example

Total 1000

10 / page

1

2

3

4

5

···

100

Go to

<VxPagination
  v-model="page"
  v-model:pageSize="pageSize"
  :total="1000"
  :layout="['total', 'sizes', 'prev', 'pager', 'next', 'jumper']"
  :page-sizes="[10, 20, 50, 100]"
/>

API

Props

Prop	Type	Default	Description
modelValue	number	1	Current page number
total	number	0	Total number of items
pageSize	number	10	Items per page
pageSizes	number[]	[10, 20, 50, 100]	Options for page size selector
pagerCount	number	7	Max visible page buttons (odd, 5-21)
layout	string[]	['prev', 'pager', 'next']	Layout parts: total, sizes, prev, pager, next, jumper
size	'sm' | 'default' | 'lg'	'default'	Component size
disabled	boolean	false	Disable the pagination
hideOnSinglePage	boolean	false	Hide when there is only one page
simple	boolean	false	Simple mode: prev/next with page indicator
slider	boolean	false	Slider mode: sliding window of pages
visiblePages	number	3	Number of visible pages in slider mode
pageFormat	(page: number) => string	—	Custom page number formatter

Events

Event	Payload	Description
update:modelValue	number	Page changed
change	number	Page changed
update:pageSize	number	Page size changed
size-change	number	Page size changed

Slots

Slot	Props	Description
prev	—	Custom prev button content
next	—	Custom next button content
page	{ page: number }	Custom page button content