<VueListPagination>

The default slot gives you full control over rendering pagination. You get all the computed state and helper functions needed to build a custom pagination layout from scratch.

<template>
  <VueListPagination :page-links="5">
    <template #first></template>
    <template #prev></template>
    <template #page></template>
    <template #next></template>
    <template #last></template>
  </VueListPagination>
</template>

Heads up!

This component will only work when paginationMode prop is set to pagination on the root <VueList> component.

Props

Name	Description
pageLinks	Number Defines how many pagination buttons should be visible at once. The current (active) page is centered when possible.

Slots

Following slots are available:

default

Use this to render the entire pagination manually. The default slot exposes a set of scoped variables that let you access and render the list state however you like.

<template>
  <VueListPagination>
    <template #default="{...}">
      <!-- Render your pagination here -->
    </template>
  </VueListPagination>
</template>

Slot Props

Name	Description
page	Number The current active page number
perPage	Number Items per page
count	Number Total number of items returned by the API
pagesCount	Number Total number of pages
pagesToDisplay	Array Array of visible page numbers (based on pageLinks prop)
halfWay	Number Half of the pageLinks count (used for centering logic)
hasNext	Boolean Is there a next page?
hasPrev	Boolean Is there a previous page?
prev	Function Go to previous page
next	Function Go to next page
first	Function Go to first page
last	Function Go to last page
setPage	Function Navigate to specific page. Pass the page number as an argument

first

Button for navigating to the first page.

Exposes same slot props as default

prev

Button for navigating to the previous page.

Exposes same slot props as default

pages

Render visible page numbers.

Exposes same slot props as default

page

Button for each visible page number.

Exposes same slot props as default

Additionally, following helper slot props are available.:

Slot Props

Name	Description
page	Number The page number
isActive	Boolean If the page is active

next

Button for navigating to the next page.

Exposes same slot props as default

last

Button for navigating to the last page.

Exposes same slot props as default