Pagination - Nuxt UI

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.

<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.

max

<UPagination :max="5" :page-count="5" :total="100" :model-value="1" />

Size

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

size

<UPagination size="sm" :model-value="1" :total="100" show-last show-first />

Active / Inactive

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

<UPagination
  :active-button="{ variant: 'outline' }"
  :inactive-button="{ color: 'gray' }"
  :model-value="1"
  :total="100"
/>

Prev / Next

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

<UPagination
  :prev-button="{ icon: 'i-heroicons-arrow-small-left-20-solid', label: 'Prev', color: 'gray' }"
  :next-button="{ icon: 'i-heroicons-arrow-small-right-20-solid', trailing: true, label: 'Next', color: 'gray' }"
  :model-value="1"
  :total="100"
/>

First / Last New

Use the first-button and last-button props to customize the first and last buttons of the Pagination.

<UPagination
  :first-button="{ icon: 'i-heroicons-arrow-small-left-20-solid', label: 'First', color: 'gray' }"
  :last-button="{ icon: 'i-heroicons-arrow-small-right-20-solid', trailing: true, label: 'Last', color: 'gray' }"
  :model-value="1"
  :total="100"
  show-first
  show-last
/>

Slots

`prev` / `next`

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

<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>

`first` / `last` New

Use the #first and #last slots to set the content of the first and last buttons.

<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 #first="{ onClick }">
      <UTooltip text="First page">
        <UButton icon="i-heroicons-arrow-uturn-left" color="primary" :ui="{ rounded: 'rounded-full' }" class="rtl:[&_span:first-child]:rotate-180 me-2" @click="onClick" />
      </UTooltip>
    </template>

    <template #last="{ onClick }">
      <UTooltip text="Last page">
        <UButton icon="i-heroicons-arrow-uturn-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

modelValuerequired

number

totalrequired

number

any

undefined

max

number

7

size

"md" | "2xs" | "xs" | "sm" | "lg" | "xl"

config.default.size

divider

string

"\u2026"

pageCount

number

10

activeButton

Button

config.default.activeButton as Button

inactiveButton

Button

config.default.inactiveButton as Button

firstButton

Button

config.default.firstButton as Button

lastButton

Button

config.default.lastButton as Button

prevButton

Button

config.default.prevButton as Button

nextButton

Button

config.default.nextButton as Button

showFirst

boolean

false

showLast

boolean

false

Config

{
  "wrapper": "flex items-center -space-x-px",
  "base": "",
  "rounded": "first:rounded-s-md last:rounded-e-md",
  "default": {
    "size": "sm",
    "activeButton": {
      "color": "primary"
    },
    "inactiveButton": {
      "color": "white"
    },
    "firstButton": {
      "color": "white",
      "class": "rtl:[&_span:first-child]:rotate-180",
      "icon": "i-heroicons-chevron-double-left-20-solid"
    },
    "lastButton": {
      "color": "white",
      "class": "rtl:[&_span:last-child]:rotate-180",
      "icon": "i-heroicons-chevron-double-right-20-solid"
    },
    "prevButton": {
      "color": "white",
      "class": "rtl:[&_span:first-child]:rotate-180",
      "icon": "i-heroicons-chevron-left-20-solid"
    },
    "nextButton": {
      "color": "white",
      "class": "rtl:[&_span:last-child]:rotate-180",
      "icon": "i-heroicons-chevron-right-20-solid "
    }
  }
}

CommandPalette

Add a customizable command palette to your app.

Tabs

A set of tab panels that are displayed one at a time.