Skip to main content

​
Usage

The Pagination component allows users to navigate through pages of content. It supports customizable controls, icons, colors, and can render as links for SEO-friendly pagination.

​
Basic Example

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

<script setup>
const page = ref(1)
</script>

​
Custom Items Per Page

<template>
  <UPagination v-model="page" :total="250" :items-per-page="25" />
</template>

<script setup>
const page = ref(1)
</script>

​
With Custom Styling

<template>
  <UPagination 
    v-model="page" 
    :total="100"
    color="primary"
    variant="solid"
    active-color="neutral"
    active-variant="outline"
  />
</template>

<script setup>
const page = ref(1)
</script>

​
Without Edge Controls

<template>
  <UPagination 
    v-model="page" 
    :total="100"
    :show-edges="false"
  />
</template>

<script setup>
const page = ref(1)
</script>

​
Without All Controls

<template>
  <UPagination 
    v-model="page" 
    :total="100"
    :show-controls="false"
  />
</template>

<script setup>
const page = ref(1)
</script>

​
Custom Sibling Count

<template>
  <UPagination 
    v-model="page" 
    :total="200"
    :sibling-count="1"
  />
</template>

<script setup>
const page = ref(1)
</script>

<template>
  <UPagination 
    v-model="page" 
    :total="100"
    :to="(page) => ({ query: { page } })"
  />
</template>

<script setup>
const page = ref(1)
</script>

​
Different Sizes

<template>
  <div class="space-y-4">
    <UPagination v-model="page" :total="100" size="xs" />
    <UPagination v-model="page" :total="100" size="sm" />
    <UPagination v-model="page" :total="100" size="md" />
    <UPagination v-model="page" :total="100" size="lg" />
    <UPagination v-model="page" :total="100" size="xl" />
  </div>
</template>

<script setup>
const page = ref(1)
</script>

​
API

​
Props

​
page
number
The current page number (v-model).
​
total
number
default:"0"
Total number of items.
​
itemsPerPage
number
default:"10"
Number of items to display per page.
​
defaultPage
number
The default page number when uncontrolled.
​
as
any
default:"'div'"
The element or component this component should render as.
​
color
string
default:"'neutral'"
The color of the pagination controls.
​
variant
string
default:"'outline'"
The variant of the pagination controls.
​
activeColor
string
default:"'primary'"
The color of the active pagination control.
​
activeVariant
string
default:"'solid'"
The variant of the active pagination control.
​
size
string
The size of the pagination controls. Options: xs, sm, md, lg, xl.
​
showControls
boolean
default:"true"
Whether to show the first, previous, next, and last controls.
​
showEdges
boolean
default:"false"
Whether to show the first and last page buttons.
​
siblingCount
number
default:"2"
Number of page buttons to show on each side of the current page.
​
disabled
boolean
Whether the pagination is disabled.
​
firstIcon
string
default:"appConfig.ui.icons.chevronDoubleLeft"
The icon to use for the first page control. Supports Iconify icons.
​
prevIcon
string
default:"appConfig.ui.icons.chevronLeft"
The icon to use for the previous page control. Supports Iconify icons.
​
nextIcon
string
default:"appConfig.ui.icons.chevronRight"
The icon to use for the next page control. Supports Iconify icons.
​
lastIcon
string
default:"appConfig.ui.icons.chevronDoubleRight"
The icon to use for the last page control. Supports Iconify icons.
​
ellipsisIcon
string
default:"appConfig.ui.icons.ellipsis"
The icon to use for the ellipsis control. Supports Iconify icons.
​
to
(page: number) => string | object
A function to render page controls as links. Receives the page number and should return a navigation target.
​
class
any
Additional CSS classes to apply to the root element.
​
ui
object
Custom UI configuration for slots.

​
Emits

​
update:page
(page: number) => void
Emitted when the page changes.

​
Slots

​
first

Customize the first page button. 
<template>
  <UPagination v-model="page" :total="100">
    <template #first>
      <UButton icon="i-lucide-chevrons-left" />
    </template>
  </UPagination>
</template>

​
prev

Customize the previous page button. 
<template>
  <UPagination v-model="page" :total="100">
    <template #prev>
      <UButton label="Previous" />
    </template>
  </UPagination>
</template>

​
next

Customize the next page button. 
<template>
  <UPagination v-model="page" :total="100">
    <template #next>
      <UButton label="Next" />
    </template>
  </UPagination>
</template>

​
last

Customize the last page button. 
<template>
  <UPagination v-model="page" :total="100">
    <template #last>
      <UButton icon="i-lucide-chevrons-right" />
    </template>
  </UPagination>
</template>

​
item

Customize individual page number buttons. 
<template>
  <UPagination v-model="page" :total="100">
    <template #item="{ item, index, page, pageCount }">
      <UButton 
        :label="String(item.value)"
        :color="page === item.value ? 'primary' : 'neutral'"
      />
    </template>
  </UPagination>
</template>

​
ellipsis

Customize the ellipsis indicator. 
<template>
  <UPagination v-model="page" :total="100">
    <template #ellipsis="{ ui }">
      <span class="px-3">...</span>
    </template>
  </UPagination>
</template>

Build docs developers (and LLMs) love

Get started for freeTalk to us