Vue.js Bootstrap Faker.js REST API Pagination Using vue-paginator Library in Javascript Full Project For Beginners

Vue.js Bootstrap Faker.js REST API Pagination Using vue-paginator Library in Javascript Full Project For Beginners
  • Post author:
  • Post category:Vue
  • Post comments:0 Comments


Welcome folks today in this blog post we will be building a bootstrap faker.js rest api pagination in vue.js using vue-paginator library in javascript. All the full source code of the application is given below.






In order to get started you need to create a brand new vue.js project and then install the below library using the npm command as shown below

npm i --save @zaichaopan/vue-paginator


Use the plugin

import vue from 'vue';

import VuePaginator from '@zaichaopan/vue-paginator';



Now you can use the component vue-paginator in all your own vue components.

For all the images and javascript files you can download the full github repository as shown below




After downloading it the directory structure will look something like this




Required Prop


The meta prop is required and has to be an object which contains 3 properties:

  • total: the total number of items that needs pagination
  • current_page: the current page number
  • last_page: last page number
See also  Vue.js IFrame Embed Component For Youtube,Dailymotion,Vimeo Videos Using v-video-embed Library in Javascript Full Project For Beginners

Optional Prop


The pagesPerSection is used to configure how many pages you want to display in a section. It is optional and the default value is 10.

Slot Scope

This plugin uses slot-slot to exposure 4 properties which can be used to build paginator.

  • showPaginator: a boolean value which is used to hide the pagaintor when you are fetching the data or when there is no data coming back
  • pages: an array which is used to display page items during a section
  • switcher: an object which provides you with functionality to go to next page, previous page or a specific page:
    • switcher.prev: method, go to previous page
    • method, go to next page
    • switcher.toPage(page): method, go to a specific page
  • section: an object which allows you to easily go to next or previous section. It also helps you hide section indicator where is no next and previous section.
    • section.showPrev: boolean, whether there is a previous section or not
    • section.showNext: boolean, whether there is a next section or not
    • method, go to next section
    • section.prev: method, go to previous section
See also  Build a Vue.js WebRTC Audio Recorder From Microphone Which Play,Download and Upload Recorded Audio to Server in Browser Using Javascript Full Project For Beginners



  <vue-paginator :meta="meta">
    <div v-if="showPaginator" slot-scope="{showPaginator, pages, switcher, section}">
        <li class="page-item" @click.prevent="switcher.prev">
            <a class="page-link" href="#" >

        <li class="page-item" v-if="section.showPrev" @click.prevent="section.prev">
            <a class="page-link" href="#">

        <li class="page-item" v-for="(page, index) in pages" :key="index">
            <a class="page-link" href="#" @click.prevent="switcher.toPage(page)">
                {{ page }}

        <li class="page-item" v-if="section.showNext" @click.prevent="">
            <a class="page-link" href="#">

        <li class="page-item" @click.prevent="">
            <a class="page-link" href="#">





Live Demo



Vue.js REST API Pagination


Leave a Reply