VuePaginationComponent.js

export default {
    props: {
        pagination: {
            type: Object,
            required: true
        },
        offset: {
            type: Number,
            default: 4
        }
    },

    template : '<ul class="pagination" v-if="pagination.last_page != 1">\n' +
        '    <li v-if="pagination.current_page > 1">\n' +
        '        <a href="javascript:void(0)" aria-label="Previous" @click.prevent="changePage(pagination.current_page - 1)">\n' +
        '            <span aria-hidden="true">«</span>\n' +
        '            </a>\n' +
        '        </li>\n' +
        '    <li v-for="page in pagesNumber" :class="{\'active\': page == pagination.current_page}">\n' +
        '        <a href="javascript:void(0)" @click.prevent="changePage(page)">{{ page }}</a>\n' +
        '        </li>\n' +
        '    <li v-if="pagination.current_page < pagination.last_page">\n' +
        '        <a href="javascript:void(0)" aria-label="Next" @click.prevent="changePage(pagination.current_page + 1)">\n' +
        '            <span aria-hidden="true">»</span>\n' +
        '            </a>\n' +
        '        </li>\n' +
        '    </ul>',

    computed: {
        pagesNumber() {
            if (!this.pagination.to) {
                return [];
            }
            let from = this.pagination.current_page - this.offset;
            if (from < 1) {
                from = 1;
            }
            let to = from + (this.offset * 2);
            if (to >= this.pagination.last_page) {
                to = this.pagination.last_page;
            }
            let pagesArray = [];
            for (let page = from; page <= to; page++) {
                pagesArray.push(page);
            }
            return pagesArray;
        }
    },
    methods : {
        changePage(page) {
            this.pagination.current_page = page;
            this.$emit('paginate');
        }
    }
}