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" :value="1" />

Size

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

size

<UPagination size="sm" :value="1" :total="100" />

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' }"
  :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' }"
  :value="1"
  :total="100"
/>

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>

Props

modelValuerequired

number

totalrequired

number

size

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

config.default.size

any

undefined

max

number

7

divider

string

"\u2026"

pageCount

number

10

activeButton

Button

config.default.activeButton as Button

inactiveButton

Button

config.default.inactiveButton as Button

prevButton

Button

config.default.prevButton as Button

nextButton

Button

config.default.nextButton as Button

Preset

{
  "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"
    },
    "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.