Pagination
Usage
Use the default-page prop or the v-model:page directive to control the current page.
<script setup lang="ts">
const page = ref(5)
</script>
<template>
<UPagination v-model:page="page" :total="100" />
</template>
Button to display the pages, use color, variant and size props to style them.Total
Use the total prop to set the total number of items in the list.
<script setup lang="ts">
const page = ref(5)
</script>
<template>
<UPagination v-model:page="page" :total="100" />
</template>
Items Per Page
Use the items-per-page prop to set the number of items per page. Defaults to 10.
<script setup lang="ts">
const page = ref(5)
</script>
<template>
<UPagination v-model:page="page" :items-per-page="20" :total="100" />
</template>
Sibling Count
Use the sibling-count prop to set the number of siblings to show. Defaults to 2.
<script setup lang="ts">
const page = ref(5)
</script>
<template>
<UPagination v-model:page="page" :sibling-count="1" :total="100" />
</template>
Show Edges
Use the show-edges prop to always show the ellipsis, first and last pages. Defaults to false.
<script setup lang="ts">
const page = ref(5)
</script>
<template>
<UPagination v-model:page="page" show-edges :sibling-count="1" :total="100" />
</template>
Show Controls
Use the show-controls prop to show the first, prev, next and last buttons. Defaults to true.
<script setup lang="ts">
const page = ref(5)
</script>
<template>
<UPagination v-model:page="page" :show-controls="false" show-edges :total="100" />
</template>
Color
Use the color prop to set the color of the inactive controls. Defaults to neutral.
<script setup lang="ts">
const page = ref(5)
</script>
<template>
<UPagination v-model:page="page" color="primary" :total="100" />
</template>
Variant
Use the variant prop to set the variant of the inactive controls. Defaults to outline.
<script setup lang="ts">
const page = ref(5)
</script>
<template>
<UPagination v-model:page="page" color="neutral" variant="subtle" :total="100" />
</template>
Active Color
Use the active-color prop to set the color of the active control. Defaults to primary.
<script setup lang="ts">
const page = ref(5)
</script>
<template>
<UPagination v-model:page="page" active-color="neutral" :total="100" />
</template>
Active Variant
Use the active-variant prop to set the variant of the active control. Defaults to solid.
<script setup lang="ts">
const page = ref(5)
</script>
<template>
<UPagination v-model:page="page" active-color="primary" active-variant="subtle" :total="100" />
</template>
Size
Use the size prop to set the size of the controls. Defaults to md.
<script setup lang="ts">
const page = ref(5)
</script>
<template>
<UPagination v-model:page="page" size="xl" :total="100" />
</template>
Disabled
Use the disabled prop to disable the pagination controls.
<script setup lang="ts">
const page = ref(5)
</script>
<template>
<UPagination v-model:page="page" :total="100" disabled />
</template>
Examples
With links
Use the to prop to transform buttons into links. Pass a function that receives the page number and returns a route destination.
<script setup lang="ts">
const page = ref(5)
function to(page: number) {
return {
query: {
page
},
hash: '#with-links'
}
}
</script>
<template>
<UPagination v-model:page="page" :total="100" :to="to" :sibling-count="1" show-edges />
</template>
#with-links hash to avoid going to the top of the page.API
Props
| Prop | Default | Type |
|---|---|---|
as |
|
The element or component this component should render as. |
firstIcon |
|
The icon to use for the first page control. |
prevIcon |
|
The icon to use for the previous page control. |
nextIcon |
|
The icon to use for the next page control. |
lastIcon |
|
The icon to use for the last page control. |
ellipsisIcon |
|
The icon to use for the ellipsis control. |
color |
|
The color of the pagination controls. |
variant |
|
The variant of the pagination controls. |
activeColor |
|
The color of the active pagination control. |
activeVariant |
|
The variant of the active pagination control. |
showControls |
|
Whether to show the first, previous, next, and last controls. |
size |
| |
to |
A function to render page controls as links. | |
disabled |
When | |
page |
The controlled value of the current page. Can be binded as | |
defaultPage |
The value of the page that should be active when initially rendered. Use when you do not need to control the value state. | |
itemsPerPage |
|
Number of items per page |
showEdges |
|
When |
siblingCount |
|
Number of sibling should be shown around the current page |
total |
|
Number of items in your list |
ui |
|
Slots
| Slot | Type |
|---|---|
first |
|
prev |
|
next |
|
last |
|
ellipsis |
|
item |
|
Emits
| Event | Type |
|---|---|
update:page |
|
Theme
export default defineAppConfig({
ui: {
pagination: {
slots: {
root: '',
list: 'flex items-center gap-1',
ellipsis: 'pointer-events-none',
label: 'min-w-5 text-center',
first: '',
prev: '',
item: '',
next: '',
last: ''
}
}
}
})
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'
export default defineConfig({
plugins: [
vue(),
ui({
ui: {
pagination: {
slots: {
root: '',
list: 'flex items-center gap-1',
ellipsis: 'pointer-events-none',
label: 'min-w-5 text-center',
first: '',
prev: '',
item: '',
next: '',
last: ''
}
}
}
})
]
})