Handle your data with a pagination component


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

Live demo page, check your console while changing pages.


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

    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);


  • 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.