Paginate-vuejs NPM

Paginate Vuejs

Note: This version only works with Vue 3

Pagination

The Pagination component allows the user to choose a particular page from a selection of pages.

Basic pagination

Outlined pagination

Rounded pagination

Show buttons

You can optionally enable first-page and last-page buttons.

Show buttons

Hide buttons

You can optionally disable the previous-page and next-page buttons.

Hide buttons

Custom icons

It's possible to customize the control icons.

Custom icons

Pagination ranges

You can specify how many digits to display either side of current page with the siblingCount prop, and adjacent to the start and end page number with the boundaryCount prop.

Pagination ranges

Pagination API

Explore the API reference documentation for the Vuejs Pagination component, where you can discover information regarding its props, classes, and other available APIs.

Demos

This is a simple Demo environment for the package where you can use and test the package.

Import

App.vue

<script setup>
// Import the package
import { Pagination } from "paginate-vuejs";

// Import the CSS file to apply the default styling.
import 'paginate-vuejs/dist/style.css';

const clickCallback = (pageNum) => {
  // Add your code here
};
</script>

<template>
  <Pagination :total="100" :clickHandler="clickCallback" />
</template>

OR

main.js

import { createApp } from 'vue';
import App from './App.vue';

// Import the package
import Pagination from 'paginate-vuejs';

// Import the CSS file to apply the default styling.
import 'paginate-vuejs/dist/style.css';

// Register the package
createApp(App).use(PaginateVuejs).mount('#app');

import { Pagination } from "paginate-vuejs";

App.vue

<script setup>
const clickCallback = (pageNum) => {
  // Add your code here
};
</script>

<template>
  <Pagination :total="100" :clickHandler="clickCallback" />
</template>

Props

Component Attributes

Name	Type	Default	Description
total	`integer`	___	The total count of pages is `required`.
perPage	`bool`	`10`	The number of items or records displayed on each page.
currentPage	`integer`	`1`	The current page active.
siblingCount	`integer`	`1`	Number of always visible pages before and after the current page.
boundaryCount	`integer`	`1`	Number of always visible pages at the beginning and end.
hideNextButton	`bool`	`false`	If `true`, hide the next-page button.
hidePrevButton	`bool`	`false`	If `true`, hide the previous-page button.
showFirstButton	`bool`	`false`	Show the `First` button.
showLastButton	`bool`	`false`	Show the `Last` button.
clickHandler	`func`	___	Callback fired when the page is changed. `function(page: number) => void` `page` The page selected.
type	`'link' \\| 'button'`	`'button'`	HTML Element type of the pagination component.
linkUrl	`string`	`'#'`	Necessary when the type attribute is configured as 'link' and should include the "{page}" placeholder for it to be substituted with the actual page number when rendering.
disablePagination	`bool`	`false`	Toggle the buttons for the entire component on/off.
disablePagination	`bool`	`false`	Toggle the buttons for the entire component on/off.
paginationTypes	`'normal' \\| 'standard' \\| 'minimal' \\| 'of'`	`normal`	The style of pagination to be applied ('normal', 'standard', 'minimal', or 'of').

Class Name Attributes

Name	Default	Description
pageContainerClass	`'pagination-container'`	Styles applied to the component's container.
pageItemClass	`'page-item'`	Styles applied to individual page items.
pageLinkClass	`'page-link'`	Styles applied to page links.
activeClass	`'active'`	Styles applied to the currently active page.
ellipsisClass	`'pagination-ellipsis'`	Styles applied to the ellipsis indicator.