Vue3 Bootstrap Paginate

Vue3 Bootstrap Paginate is a paging library for VueJS that uses bootstrap's style.

:cd: Installation

• npm: npm i vue3-bootstrap-paginate

Usage

You can import and register the component globally in your main.js, or import and use it in a particular component.

Vue2: To register in your main.js

import Vue from 'vue';
// Import the component
import { Vue3BsPaginate } from 'vue3-bootstrap-paginate';

// Register the component globally
Vue.component('Vue3BsPaginate', Vue3BsPaginate);

Vue3: To register in your main.js

import { createApp } from 'vue';

// Import the component
import { Vue3BsPaginate } from 'vue3-bootstrap-paginate';

const app = createApp({});

// Register the component globally
app.component('Vue3BsPaginate', Vue3BsPaginate);

To register in your component

<script>
	import Vue3BsPaginate from 'vue3-bootstrap-paginate';
	export default {
		components: { Vue3BsPaginate },
	};
</script>

Using in your .vue file

<template>
	<Vue3BsPaginate
		:total="150"
		v-model="currentPage"
		:perPage="10"
		:onChange="onChangePage"
		alignment="center"
	/>
</template>

API

Props

| Prop | Type | Default | Options | Description | | ------ | ------ | ------ | ------ | ------ | | total | Number | required | | Total number of items that you want to paginate | | perPage | Number | 10 | | Total number of items that you explicitly want to show per one page | | pagesShown | Number | 5 | | Maximum pagination page to be shown | | v-model | Number | required | | Current active page | | size | String | 'md' | 'lg','sm' | Size of button according to bootstrap | | alignment | String | 'start' | 'center','end' | Align the position of the pagination | | prevContent | String | '‹' | | Content of previous button | | nextContent | String | '›' | | Content of next button | | firstJumpContent | String | '«' | | Content of jump to first button | | lastJumpContent | String | '»' | | Content of jump to last button | | showPrevNextButton | Boolean | true | | Show previous and next button | | showJumpButtons | Boolean | false | | Show jump to first and last button | | onChange | Function | () => { } | | A function that runs when the user changes a page by clicking any of the elements of the component (Passing the new active page to the function as a parameter) |

Project setup

Install dependencies

• npm: npm install

Start Dev Server

• npm: npm run serve

Compiles and minifies for production

• npm: npm run build