Vue.js Pagination Example With Bootstrap [Server-side Pagination]


This article will help you to create a Vue.js pagination example with Bootstrap 4 and it can be used with your Vue.js new or existing app.

The serverside pagination is always crucial to implement because it’s a standard practice to call the data from server, on the fly.

It’s easy to use the pagination that works only on the client-side, but that could create performance issues when the application goes bigger. So, it’s always recommended to use a pagination that supports server-side call.

Moreover, it should be responsive and compatible with your app.

Here, we’ll create a Vue.js 2.x and Bootstrap 4 compatible pagination that you can use with your Vue.js app.

So, let’s get started with the Vue.js pagination example.

1. Install Bootstrap In Your App

Note: Here, I assume that you’ve already setup your Vue.js app. If not, you can visit How To Install and Setup Vue.js.

First of all, let’s install the bootstrap in your Vue.js app.

# With NPM:

npm i bootstrap-vue bootstrap@4.0.0-beta.2

OR # With Yarn:

yarn add bootstrap-vue bootstrap@4.0.0-beta.2

Next, let’s import the bootstrap dependencies in main.js of your app.


import BootstrapVue from ‘bootstrap-vue’

Now, we’re all set to use any of Bootstrap 4 components using BootstrapVue withing our app.

2. Vue.js Pagination Example With Bootstrap 4

First of all, we need to import the pagination component to use it as a plugin.

import { Pagination } from ‘bootstrap-vue/es/components’


Finally, you can use pagination by just putting few lines of code with needed options.



Here, we’re going to fetch the data from a REST API call and populate the data in the browser with pagination enabled.

So, let’s see how template part works.




  • b-pagination size can be defined as md (default), sm and lg options.
  • b-pagination alignment can be defined as left, center and right.


  • Firstly, we’ve populated the data those are fetched by using the REST API calls using Axios.
  • Secondly, we’ve defined b-pagination component with the parameters like total-rows and per-page.
  • Finally, in the script part, we’ve call the REST API to fetch the data and that data will be populated in the template.


  • Here, you can change total-rows and per-page limit as per your need.
  • Also, I’ve used the dummy JSON data, you can use any RESP API as per your requirement.

Here, is the full code that you can use it to integrate a bootstrap pagination with Vue.js app.

[js tab=”main.js”]
//Import Vue
import Vue from ‘vue’
//Import App Component
import App from ‘./App’
//Import Router
import router from ‘./router’
//Import Bootstrap
import BootstrapVue from ‘bootstrap-vue’
//Import Pagination component
import { Pagination } from ‘bootstrap-vue/es/components’

Vue.config.productionTip = false


/* eslint-disable no-new */
new Vue({
el: ‘#app’,
template: ‘‘,
components: { App }
[html tab=”App.vue”]


Here, if you’re looking to use few more properties with your pagination, you can visit bootstrap pagination document.

Moveover, I hope it helped you to integrate a Vue.js pagination example with your app.

Don’t forget to share with your friends on following social media!

0 0 votes
Article Rating
Notify of
1 Comment
Newest Most Voted
Inline Feedbacks
View all comments
4 years ago

Thanks Dude

classy ebony stepdaughter screwed sensually.kirmiziyilan.com

Would love your thoughts, please comment.x