PubPagination

This is a pagination component which can be used to paginate through a list of items.

Default Usage

<template>
  <pub-pagination
    v-model="currentPage"
    :total-items="100"
  />
  <pub-pagination
    v-model="currentPage"
    :total-items="100"
    size="md"
  />
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { PubPagination } from 'vuelicity'

const currentPage = ref(1)
</script>

Pagination with icons

<template>
  <pub-pagination
    v-model="currentPage"
    :total-items="100"
    hide-labels
    show-icons
  />
  <pub-pagination
    v-model="currentPage"
    :total-items="100"
    hide-labels
    show-icons
    size="lg"
  />
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { PubPagination } from 'vuelicity'

const currentPage = ref(1)
</script>

Custom length pagination

<template>
  <pub-pagination
    v-model="currentPage"
    :slice-size="4"
    :total-pages="100"
  />
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { PubPagination } from 'vuelicity'

const currentPage = ref(5)
</script>

Previous and Next

<template>
  <pub-pagination
    v-model="currentPage"
    layout="navigation"
    :total-pages="100"
  />
  <pub-pagination
    v-model="currentPage"
    layout="navigation"
    :total-pages="100"
    size="md"
  />
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { PubPagination } from 'vuelicity'

const currentPage = ref(1)
</script>

Previous and Next with icons

<template>
  <pub-pagination
    v-model="currentPage"
    layout="navigation"
    :total-pages="100"
    show-icons
  />
  <pub-pagination
    v-model="currentPage"
    layout="navigation"
    :total-pages="100"
    show-icons
    size="lg"
  />
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { PubPagination } from 'vuelicity'

const currentPage = ref(1)
</script>

First and Last

<template>
  <pub-pagination
    v-model="currentPage"
    :total-pages="100"
    show-first-last
  />
  <pub-pagination
    v-model="currentPage"
    :total-pages="100"
    show-first-last
    size="md"
  />
  <pub-pagination
    v-model="currentPage"
    :total-pages="100"
    show-first-last
    show-icons
  />
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { PubPagination } from 'vuelicity'

const currentPage = ref(1)
</script>

Table data pagination

Showing 1 to 20 of 100

Showing 1 to 100 of 550

<template>
  <pub-pagination
    v-model="currentPage1"
    layout="table"
    :page-size="20"
    :total-items="100"
  />
  <pub-pagination
    v-model="currentPage2"
    layout="table"
    :page-size="100"
    :total-items="550"
    size="md"
  />
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { PubPagination } from 'vuelicity'

const currentPage1 = ref(1)
const currentPage2 = ref(1)
</script>

Pagination with custom labels

<template>
  <pub-pagination
    v-model="currentPage"
    :total-pages="100"
    prev-label="<<<"
    next-label=">>>"
  />
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { PubPagination } from 'vuelicity'

const currentPage = ref(1)
</script>

Reference

Properties

Name	Type	Default	Description	Options
modelValue	Number	1	The current page number.
totalPages	Number	undefined	The total number of pages.
pageSize	Number	10	The number of items per page.
totalItems	Number	10	The total number of items.
size	String	'sm'	The size of the pagination buttons.	'sm', 'md', 'lg'
sliceSize	Number	2	The number of page buttons to show around the current page.
prevLabel	String	'Previous'	The label for the previous button.
nextLabel	String	'Next'	The label for the next button.
firstLabel	String	'First'	The label for the first button.
lastLabel	String	'Last'	The label for the last button.
showIcons	Boolean	false	Whether to show icons for navigation buttons.
showFirstLast	Boolean	false	Whether to show first and last page buttons.
hidePrev	Boolean	false	Whether to hide the previous button.
hideNext	Boolean	false	Whether to hide the next button.
hideLabels	Boolean	false	Whether to hide the labels for navigation buttons.
layout	String	'pagination'	The layout style of the pagination.	'pagination', 'navigation', 'table'

Slots

Name	Description
start	Slot for content at the beginning of the pagination.
first-button	Slot for the first page button.
first-icon	Slot for the icon of the first page button.
prev-button	Slot for the previous page button.
prev-icon	Slot for the icon of the previous page button.
page-button	Slot for individual page number buttons.
next-button	Slot for the next page button.
next-icon	Slot for the icon of the next page button.
last-button	Slot for the last page button.
last-icon	Slot for the icon of the last page button.
end	Slot for content at the end of the pagination.

Events

Name	Description
update:model-value	Emitted when the current page changes.
page-changed	Emitted when the current page changes.