Handle your data with a pagination component

vue-paginate-al

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

Live demo page, check your console while changing pages.

Example

Getting started with pagination:

install it using the following command:

yarn add vue-paginate-al

Register as a Plugin:

import Vue from 'vue'
import VuePaginateAl from 'vue-paginate-al'

Vue.component('vue-paginate-al', VuePaginateAl)

Example usage in your template

<vue-paginate-al 
    :totalPage="22" 
    :myData="mydata" 
    @btnClick="goToFuncWithData" 
    activeBGColor="success" 
    :withNextPrev="true" 
    nextText="Go Forward" 
    prevText="Go back"/>

Use the above options to handle your data:

data () {
    return {
        mydata: 'other data',
    }
},
methods : {
        goToFuncWithData : function(n, data)
        {
            console.log(n, data);
        }
}

Props

  • totalPage Total pages
  • currentPage Current page
  • myData For callback data
  • withNextPrevTo show or hide next/prev buttons
  • nextText Text for the Next button
  • prevText Text for the Prev button
  • activeBGColor Background color

  • customActiveBGColor Background custom color

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