Pagination.vue

<template>
    <div class="col-sm-12 col-md-7">
        <nav>
            <ul class="pagination pagination-rounded">
                <li class="page-item">
                    <a class="page-link" href="javascript: void(0);" aria-label="Previous" @click.prevent="pageChanged(1)">
                        <span aria-hidden="true">«</span>
                        <span class="sr-only">Previous</span>
                    </a>
                </li>
                <li class="page-item" v-for="page in paginationRange" :class="activePage(page)">
                    <a class="page-link" href="javascript: void(0);" @click.prevent="pageChanged(page)">{{ page }}</a>
                </li>
                <li class="page-item">
                    <a class="page-link" href="javascript: void(0);" aria-label="Next" @click.prevent="pageChanged(lastPage)">
                        <span aria-hidden="true">»</span>
                        <span class="sr-only">Next</span>
                    </a>
                </li>
            </ul>
        </nav>
    </div>
</template>

<script>
    export default {
        name: "Pagination",
        props: {

            // Current Page
            currentPage: {
                type: Number,
                required: true
            },

            // Total number of pages
            totalPages: {
                type: Number,
                required: true
            },

            // Items per page
            itemsPerPage: {
                type: Number,
                required: true
            },

            // Total items
            totalItems: {
                type: Number,
                required: true
            },

            // Visible Pages
            visiblePages: {
                type: Number,
                default: 5,
                required: false,
                coerce: (val) => parseInt(val)
            }

        },
        data(){
            return {
                stateCurrentPage: Number,
                stateTotalPages: Number,
                stateItemsPerPage: Number,
                stateTotalItems: Number,
            }
        },
        computed: {
            lastPage () {
                if (this.totalPages) {
                    return this.totalPages
                } else {
                    return this.totalItems % this.itemsPerPage === 0
                        ? this.totalItems / this.itemsPerPage
                        : Math.floor(this.totalItems / this.itemsPerPage) + 1
                }
            },

            paginationRange () {
                let start =
                    this.currentPage - this.visiblePages / 2 <= 0
                        ? 1 : this.currentPage + this.visiblePages / 2 > this.lastPage
                        ? HelperJS.lowerBound(this.lastPage - this.visiblePages + 1, 1)
                        : Math.ceil(this.currentPage - this.visiblePages / 2);

                let range = [];

                for (let i = 0; i < this.visiblePages && i < this.lastPage; i++) {
                    range.push(start + i)
                }

                return range
            }
        },
        methods: {
            /**
             *
             * @param pageNum
             * @returns {string}
             */
            activePage (pageNum) {
                return this.currentPage === pageNum ? 'active' : ''
            },
            /**
             *
             * @param pageNum
             * @return event
             */
            pageChanged (pageNum) {
                this.$emit('page-changed', pageNum)
            }
        },
    }
</script>

<style scoped>

</style>