Pagination

Pagination component with multiple display modes (button, input, xy), optional page size selection, and event emissions for page changes.

<VsPagination
    :total="100"
    :page-size="10"
    :page="2"
    :view="'button'"
    :showPageSizes="true"
    :pageRange="3"/>

• 1
• 2
• 3

Interface

export interface PaginationProps {
  pageSize: number,
  page: number,
  total: number,
  view?: 'button' | 'input' | 'xy'
  pageSizes?: number[],
  showPageSizes?: boolean,
  pageRange?: number,
}

export interface PaginationEmits {
  (e: "update:page", value: number): void;
  (e: "pageChange", value: number): void;
  (e: "pageSizeChange", value: number): void;
}

APi

Prop	Type	Default	Description
pageSize	number	required	Current number of items per page.
page	number	required	Current active page number.
total	number	required	Total number of items.
view	'button' | 'input' | 'xy'	'button'	Pagination display style: • button – page buttons • input – manual page input • xy – “current/total” format.
pageSizes	number[]	[10, 20, 30]	List of selectable page sizes.
showPageSizes	boolean	true	Whether to show page size selector.
pageRange	number	7	Number of page buttons to display (centered around current page).
color	string	undefined	Base color class applied to the page buttons (e.g. 'blue', 'red').

view

Determines pagination control style — button for page buttons, x/y to show current/total pages, input to jump to a specific page.

<VsPagination :view="'button'"/>
<VsPagination :view="'input'"/>
<VsPagination :view="'xy'"/>

• 1
• 2
• 3
• 4
• 5
• 6
• 7

• Page

• 2/10

no page size selection

<VsPagination
    :view="'button'"
    :showPageSizes="false"
    :pageRange="3"/>

• 1
• 2
• 3
• 4
• 5
• 6
• 7

Color

<VsPagination color="blue"/>

• 1
• 2
• 3
• 4
• 5
• 6
• 7