Customizable Pagination Component – Vue Paginate Al

Customizable Pagination Component – Vue Paginate Al

Paginate Al is a simple yet highly customizable pagination component for Vue.js component.


Click here.

Install via NPM

    npm install --save vue-paginate-al

Register as Plugin

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

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


            // example 1
            <vue-paginate-al :totalPage="10" @btnClick="goToFunction"></vue-paginate-al>

            // example 2 => with background color
            <vue-paginate-al :totalPage="15" activeBGColor="success" :withNextPrev="false"></vue-paginate-al>

            // example 3 => with single data
            <vue-paginate-al :totalPage="20" :myData="'myname'" @btnClick="goToFuncWithData"></vue-paginate-al>

            // example 4 => with multiple data
            <vue-paginate-al :totalPage="20" :myData="['myname', 'myemail']" @btnClick="goToFuncWithMultipleData"></vue-paginate-al>

        import VuePaginateAl from 'vue-paginate-al'

        export default {
            name: 'App',
            components: {
            methods : {
                goToFunction : function(n)

                goToFuncWithData : function(n, data)
                    console.log(n, data);

                goToFuncWithMultipleData : function(n, data)
                    console.log(n, data[0], data[1]);


Props Description Type Required Example
totalPage Total paginate Number true 10
currentPage Current page Number false 2
myData For callback data without process String false 'myname'
withNextPrev To show or hide button next/prev Boolean false true
nextText Text for button Next String false 'Next'
prevText Text for button Prev String false 'Prev'
activeBGColor Background color String false 'primary'
customActiveBGColor Background color custom String false '#bb06a9'

Github Repository

Tags: #VueJs