ui/docs/content/5.navigation/3.pagination.md

description, links

description	links
Add a pagination to handle pages.	label icon to GitHub i-simple-icons-github https://github.com/nuxtlabs/ui/blob/dev/src/runtime/components/navigation/Pagination.vue

Usage

Use a v-model to get a reactive page alongside a total which represents the total of items. You can also use the page-count prop to define the number of items per page which defaults to 10.

::component-example #default :pagination-example-basic

#code

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

<template>
  <UPagination v-model="page" :page-count="5" :total="items.length" />
</template>

::

Max

Use the max prop to set a maximum of displayed pages. Defaults to 7, being the minimum.

::component-card

baseProps: modelValue: 1 props: max: 5 pageCount: 5 total: 100 excludedProps:

• pageCount
• total

---

::

Size

Use the size prop to change the size of the buttons.

::component-card

baseProps: modelValue: 1 total: 100 props: size: 'sm' ui: size: 2xs: true xs: true sm: true md: true lg: true xl: true

::

Active / Inactive

Use the active-button and inactive-button props to customize the active and inactive buttons of the Pagination.

::component-card

baseProps: modelValue: 1 total: 100 props: activeButton: variant: 'outline' inactiveButton: color: 'gray' excludedProps:

• activeButton
• inactiveButton

---

::

Prev / Next

Use the prev-button and next-button props to customize the prev and next buttons of the Pagination.

::component-card

baseProps: modelValue: 1 total: 100 props: prevButton: icon: 'i-heroicons-arrow-small-left-20-solid' label: Prev color: 'gray' nextButton: icon: 'i-heroicons-arrow-small-right-20-solid' trailing: true label: Next color: 'gray' excludedProps:

• prevButton
• nextButton

---

::

Slots

prev / next

Use the #prev and #next slots to set the content of the previous and next buttons.

::component-example #default :pagination-example-prev-next-slots

#code

<script setup>
const page = ref(1);
const items = ref(Array(55));
</script>

<template>
  <UPagination v-model="page" :total="items.length" :ui="{ rounded: 'first-of-type:rounded-s-md last-of-type:rounded-e-md' }">
    <template #prev="{ onClick }">
      <UTooltip text="Previous page">
        <UButton icon="i-heroicons-arrow-small-left-20-solid" color="primary" :ui="{ rounded: 'rounded-full' }" class="rtl:[&_span:first-child]:rotate-180 me-2" @click="onClick" />
      </UTooltip>
    </template>

    <template #next="{ onClick }">
      <UTooltip text="Next page">
        <UButton icon="i-heroicons-arrow-small-right-20-solid" color="primary" :ui="{ rounded: 'rounded-full' }" class="rtl:[&_span:last-child]:rotate-180 ms-2" @click="onClick" />
      </UTooltip>
    </template>
  </UPagination>
</template>

::

Props

:component-props

Preset

:component-preset