[Vuejs]-Implement Previos and Next Page using Nuxt

let pages = getCurrentPages();
 let beforePages = pages[pages.length - 2];//the before pages object 
 console.log(beforePages);

<template>
    <ul class="app-pagination">
        <template v-if="url">
            <li v-show="(current > Math.ceil(showItem / 2)) && (totalPage > showItem)">
                <nuxt-link :to="`${url}${1}`">
                   Main
                </nuxt-link>
            </li>
            <li v-show="current != 1" @click="current--">
                <nuxt-link :to="`${url}${current - 1}`">
                    Previous
                </nuxt-link>
            </li>
            <li v-for="index in pages" :key="index" :class="{'active':current == index}">
                <nuxt-link :to="`${url}${index}`">
                    {{ index }}
                </nuxt-link>
            </li>
            <li v-show="pageSize * current <= total " @click="current++">
                <nuxt-link :to="`${url}${current + 1}`">
                    Next
                </nuxt-link>
            </li>
            <li v-show="(current < totalPage) && (totalPage > showItem)">
                <nuxt-link :to="`${url}${totalPage}`">
                    last page
                </nuxt-link>
            </li>
            <li class="total">
                <a href="javascript:void(0)"> {{ total }} </a>
            </li>
        </template>
        <template v-else>
            <li @click="goto('start')">
                <a href="javascript:void(0)">Index</a>
            </li>
            <li v-show="current != 1" @click="goto('prev')">
                <a href="javascript:void(0)">Previous</a>
            </li>
            <li v-for="index in pages" :key="index" :class="{'active':current == index}" @click="goto(index)">
                <a href="javascript:void(0)">{{ index }}</a>
            </li>
            <li v-show="totalPage != current && total != 0 && total != current" @click="goto('next')">
                <a href="javascript:void(0)">Next</a>
            </li>
            <li @click="goto('end')">
                <a href="javascript:void(0)">Last Page</a>
            </li>
            <li class="total">
                <a href="javascript:void(0)">{{ total }}</a>
            </li>
        </template>
    </ul>
</template>
<script>
export default {
    name: 'AppPager',
    props: {
        url: { //Pagination link
            required: false,
            type: [String],
            default: null
        },
        total: {
            required: false,
            type: [Number],
            default: 0
        },
        page: {
            required: false,
            type: [Number, String],
            default: 0
        }
    },
    data() {
        return {
            current: 1,
            showItem: 5,
            pageSize: 8
        };
    },
    computed: {
        pages() {
            let pag = [];
            // Starting number
            let left = 1;
            // Ending number
            const totalPage = this.totalPage;
            let right = totalPage;
            let middle = Math.ceil(this.showItem / 2);
            if (totalPage >= this.showItem) {
                // In the middle, we add it to both sides（middle-1)
                if (this.current > middle && this.current < totalPage - (middle - 1)) {
                    left = this.current - (middle - 1);
                    right = this.current + (middle - 1);
                } else {
                    //Far left or in the middle of condition
                    if (this.current <= middle) {
                        left = 1;
                        right = this.showItem;
                        // On the far right
                        // The end is the total number of items, and the beginning is condition minus 1
                    } else {
                        right = totalPage;
                        left = totalPage - (this.showItem - 1);
                    }
                }
            }
            while (left <= right) {
                pag.push(left);
                left++;
            }
 
            //total pages
            console.log(pag);
            return pag;
        },
 
        /**
         * Calculate the total number of pages according to the total number of articles
         */
        totalPage() {
            return this.total % this.pageSize ? Math.floor(this.total / this.pageSize) + 1 : this.total / this.pageSize;
        }
 
    },
    watch: {
        page: {
            handler(old, val) {
                this.current = Number(old);
            },
            immediate: true
        }
    },
    methods: {
        goto(index) {
            if (index == 'start') {
                this.current = 1;
                this.$emit('page', 1);
            } else if (index == 'end') {
                this.current = this.totalPage;
                this.$emit('page', this.totalPage);
            } else if (index == 'prev') {
                this.current--;
                this.$emit('page', this.current);
            } else if (index == 'next') {
                this.current++;
                this.$emit('page', this.current);
            } else {
                this.$emit('page', index);
            }
        }
    }
};
</script>
<!-- this is less code -->
<style lang="less" scoped>
.app-pagination{
    margin: 40px auto;
    text-align: center;
    li{
        display: inline-block;
        margin: 0 6px;
        a{
            padding: 8px;
            display: inline-block;
            color: #626262;
            &:hover{
                color: #FFB400;
            }
        }
        &.active a{
            color: #FFB400;
        }
        &.total a{
            color: #FFB400;
        }
    }
}
</style>