Skip to content
On this page

Pagination

Provide pagination links for your site or app with the multi-page pagination component.

Example

Simple pagination, great for apps and search results.

Use v-model (1-based) to indicate the current page.

vue
<template>
  <Pagination v-model="currentPage" :total-page="totalPage" />
</template>

<script setup>
import { Pagination } from 'uiv';
import { ref } from 'vue';

const totalPage = ref(18);
const currentPage = ref(1);
</script>

Sizing

Fancy larger or smaller pagination? Add size="lg" or size="sm" for additional sizes.

vue
<template>
  <Pagination v-model="currentPage" :total-page="totalPage" size="lg" />
  <Pagination v-model="currentPage" :total-page="totalPage" />
  <Pagination v-model="currentPage" :total-page="totalPage" size="sm" />
</template>

<script setup>
import { Pagination } from 'uiv';
import { ref } from 'vue';

const totalPage = ref(18);
const currentPage = ref(1);
</script>

Alignment

By default the pagination component is left aligned. Change the alignment to center or right by setting align to the appropriate value.

vue
<template>
  <Pagination v-model="currentPage" :total-page="totalPage" />
  <Pagination v-model="currentPage" :total-page="totalPage" align="center" />
  <Pagination v-model="currentPage" :total-page="totalPage" align="right" />
</template>

<script setup>
import { Pagination } from 'uiv';
import { ref } from 'vue';

const totalPage = ref(18);
const currentPage = ref(1);
</script>

By default direction-links are enabled, which allows users to nav to previous or next page.

vue
<template>
  <Pagination v-model="currentPage" :total-page="totalPage" />
  <Pagination
    v-model="currentPage"
    :total-page="totalPage"
    :direction-links="false"
  />
</template>

<script setup>
import { Pagination } from 'uiv';
import { ref } from 'vue';

const totalPage = ref(18);
const currentPage = ref(1);
</script>

Add boundary-links to allow fast nav to the first or last page.

vue
<template>
  <Pagination v-model="currentPage" :total-page="totalPage" boundary-links />
</template>

<script setup>
import { Pagination } from 'uiv';
import { ref } from 'vue';

const totalPage = ref(18);
const currentPage = ref(1);
</script>

Chunks

Use max-size to define the maximum chunk size of pagers (default is 5). And if you don't like chunk pagers, just simply set max-size to equal as total-page.

vue
<template>
  <Pagination v-model="currentPage" :total-page="totalPage" :max-size="3" />
  <Pagination v-model="currentPage" :total-page="totalPage" />
  <Pagination
    v-model="currentPage"
    :total-page="totalPage"
    :max-size="totalPage"
  />
</template>

<script setup>
import { Pagination } from 'uiv';
import { ref } from 'vue';

const totalPage = ref(10);
const currentPage = ref(1);
</script>

Disabled

vue
<template>
  <Pagination v-model="currentPage" :total-page="totalPage" disabled />
</template>

<script setup>
import { Pagination } from 'uiv';
import { ref } from 'vue';

const totalPage = ref(18);
const currentPage = ref(1);
</script>

API Reference

Pagination

Props

NameTypeDefaultRequiredDescription
v-modelNumberThe current page (1-based).
total-pageNumberTotal number of pages.
max-sizeNumber5Maximum number of pagers per chunk.
boundary-linksBooleanfalseDisplay First / Last buttons.
direction-linksBooleantrueDisplay Previous / Next buttons.
sizeStringOptional pagination sizes, support: sm / lg
alignStringOptional pagination alignment, support: left / center / right
disabledBooleanfalseDisable the pagination component.

Events

NameParamsDescription
changeindexFire after page changed, with the index number changed to.

Released under the MIT License.