Vue Pagination component For Bootstrap

vue-bs-pagination

A Bootstrap Pagination component for Vue.js with simple options and setup.

Live demo page where you can edit how many pages there are.

Compatible with Vue 2.x & Bootstrap 3/4-beta.

Example

Getting started

Import via npm

npm install --save vue-bs-pagination

Register component

import Vue from 'vue'
import VuePagination from 'vue-bs-pagination'
Vue.component('v-pagination', VuePagination)

Template

<v-pagination :total="25" v-model="currentPage"></v-pagination>

With the v-model directive you can set the number of the page that should be displayed in the begining and using eachSide prop to declare how many pages can stack in each side before the dots appear.

Stylesheet Use Bootstrap 3 or Bootstrap 4.0-beta

Parameters:

props: {
  total: {
    type: Number,
    required: true,
  },
  eachSide: {
    type: Number,
    default: 1,
  },
}

This is it! This project's repository is hosted on GitHub.