Vue3 and Laravel Pagination Component

Vue3LaravelPagination.vue

/*
<pagination
:current="files.current_page"
:total="files.total"
:per-page="files.per_page"
@page-changed="get_results"
/>
*/
<template>
    <div class="text-center">
        <div class="flex flex-col items-center my-12">
            <div class="flex text-gray-700">
                
                <a 
                v-if="hasPrev()"
                @click.prevent="changePage(prevPage)"
                class="h-12 w-12 mr-1 flex justify-center items-center rounded-full bg-gray-200 cursor-pointer">
                    <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-left w-6 h-6">
                        <polyline points="15 18 9 12 15 6"></polyline>
                    </svg>
                </a>
                <div 
                class="flex h-12 font-medium rounded-full bg-gray-200">

                    <a 
                    v-if="hasFirst()"
                    @click.prevent="changePage(1)"
                    class="cursor-pointer w-12 flex justify-center items-center leading-5 transition duration-150 ease-in rounded-full">1</a>
                    <a 
                    v-if="hasFirst()"
                    class="w-12 flex justify-center items-center leading-5 transition duration-150 ease-in rounded-full">...</a>

                    <a 
                    v-for="page in pages" :key="page"
                    @click.prevent="changePage(page)"
                    :class="{
                        'bg-pink-600 text-white': current == page,
                        'hidden': isHidden(current == page),
                        'cursor-pointer': !(current == page)
                    }"
                    class="w-12 flex justify-center items-center leading-5 transition duration-150 ease-in rounded-full"
                    >
                    {{ page }}
                    </a>

                    <a 
                    v-if="hasLast()"
                    class="w-12 flex justify-center items-center leading-5 transition duration-150 ease-in rounded-full">...</a>
                    <a 
                    v-if="hasLast()"
                    @click.prevent="changePage(totalPages)"
                    class="cursor-pointer w-12 flex justify-center items-center leading-5 transition duration-150 ease-in rounded-full">
                    {{ totalPages }}
                    </a>
                <!-- <a class="w-12 h-12 md:hidden flex justify-center items-center cursor-pointer leading-5 transition duration-150 ease-in rounded-full bg-pink-600 text-white">2</a>
                <a 
                class="w-12 md:flex justify-center items-center hidden cursor-pointer leading-5 transition duration-150 ease-in  rounded-full">3</a> -->

                </div>
                <a 
                    v-if="hasNext()"
                    @click.prevent="changePage(nextPage)"
                    class="h-12 w-12 ml-1 flex justify-center items-center rounded-full bg-gray-200 cursor-pointer">
                    <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-right w-6 h-6">
                        <polyline points="9 18 15 12 9 6"></polyline>
                    </svg>
                </a>

            </div>
        </div>
    </div>
</template>

<script >

export default {
    name: 'Pagination',
    props: {
        current: {
            type: Number,
            default: 1
        },
        total: {
            type: Number,
            default: 0
        },
        perPage: {
            type: Number,
            default: 9
        },
        pageRange: {
            type: Number,
            default: 2
        },
        textBeforeInput: {
            type: String,
            default: 'Go to page'
        },
        textAfterInput: {
            type: String,
            default: 'Go'
        }
    },
    methods: {
        hasFirst: function () {
            return this.rangeStart !== 1
        },
        hasLast: function () {
            return this.rangeEnd < this.totalPages
        },
        hasPrev: function () {
            return this.current > 1
        },
        hasNext: function () {
            return this.current < this.totalPages
        },
        isHidden: function (active) 
        {
            return window.innerWidth < 768 && !active   
        },
        changePage: function (page) {
            if (page > 0 && page <= this.totalPages) {
                this.$emit('page-changed', page)
            }
        }
    },
    computed: {
        pages: function () {
            var pages = []
            for (var i = this.rangeStart; i <= this.rangeEnd; i++) {
                pages.push(i)
            }
            return pages
        },
        rangeStart: function () {
            var start = this.current - this.pageRange
            return (start > 0) ? start : 1
        },
        rangeEnd: function () {
            var end = this.current + this.pageRange
            return (end < this.totalPages) ? end : this.totalPages
        },
        totalPages: function () {
            return Math.ceil(this.total / this.perPage)
        },
        nextPage: function () {
            return this.current + 1
        },
        prevPage: function () {
            return this.current - 1
        }
    }
}
</script>