Vue Pagination + Tailwind 2.0 + Inertia

Pagination.vue

<template>
    <div class="sm:px-6 flex items-center justify-between px-4 py-3 mt-5 bg-white border-t border-gray-200">
        <div class="sm:hidden flex justify-between flex-1">
            <a
                @click.prevent="change(data.current_page - 1)"
                href="#"
                class="
                    hover:bg-gray-50
                    relative
                    inline-flex
                    items-center
                    px-4
                    py-2
                    text-sm
                    font-medium
                    text-gray-700
                    bg-white
                    border border-gray-300
                    rounded-md
                "
            >
                Anterior
            </a>
            <a
                @click.prevent="change(data.current_page + 1)"
                href="#"
                class="
                    hover:bg-gray-50
                    relative
                    inline-flex
                    items-center
                    px-4
                    py-2
                    ml-3
                    text-sm
                    font-medium
                    text-gray-700
                    bg-white
                    border border-gray-300
                    rounded-md
                "
            >
                Siguiente
            </a>
        </div>
        <div class="sm:flex-1 sm:flex sm:items-center sm:justify-between hidden">
            <div>
                <p class="text-sm text-gray-700">
                    Showing
                    <span class="font-medium">{{ data.from }}</span>
                    to
                    <span class="font-medium">{{ data.to }}</span>
                    of
                    <span class="font-medium">{{ data.total }}</span>
                    results
                </p>
            </div>
            <div>
                <nav class="relative z-0 inline-flex -space-x-px rounded-md shadow-sm" aria-label="Pagination">
                    <a
                        @click.prevent="change(data.current_page - 1)"
                        href="#"
                        class="
                            rounded-l-md
                            hover:bg-gray-50
                            relative
                            inline-flex
                            items-center
                            px-2
                            py-2
                            text-sm
                            font-medium
                            text-gray-500
                            bg-white
                            border border-gray-300
                        "
                    >
                        <span class="sr-only">Anterior</span>
                        <svg
                            class="w-5 h-5"
                            xmlns="http://www.w3.org/2000/svg"
                            viewBox="0 0 20 20"
                            fill="currentColor"
                            aria-hidden="true"
                        >
                            <path
                                fill-rule="evenodd"
                                d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
                                clip-rule="evenodd"
                            />
                        </svg>
                    </a>
                    <a
                        v-for="page in pages"
                        :key="page"
                        @click.stop.prevent="change(page)"
                        :class="[page == data.current_page ? 'z-10 bg-indigo-50 border-bote-100 text-bote-100' : '']"
                        href="#"
                        aria-current="page"
                        class="
                            hover:bg-gray-50
                            relative
                            inline-flex
                            items-center
                            px-4
                            py-2
                            text-sm
                            font-medium
                            text-gray-500
                            bg-white
                            border border-gray-300
                        "
                    >
                        {{ page }}
                    </a>
                    <a
                        @click.prevent="change(data.current_page + 1)"
                        href="#"
                        class="
                            rounded-r-md
                            hover:bg-gray-50
                            relative
                            inline-flex
                            items-center
                            px-2
                            py-2
                            text-sm
                            font-medium
                            text-gray-500
                            bg-white
                            border border-gray-300
                        "
                    >
                        <span class="sr-only">Siguiente</span>
                        <svg
                            class="w-5 h-5"
                            xmlns="http://www.w3.org/2000/svg"
                            viewBox="0 0 20 20"
                            fill="currentColor"
                            aria-hidden="true"
                        >
                            <path
                                fill-rule="evenodd"
                                d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
                                clip-rule="evenodd"
                            />
                        </svg>
                    </a>
                </nav>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        data: {
            type: Object,
            required: true,
        },
        offset: {
            type: Number,
            default: 4,
        },
    },
    computed: {
        pages() {
            if (!this.data.to) {
                return null;
            }
            let from = this.data.current_page - this.offset;
            if (from < 1) {
                from = 1;
            }
            let to = from + this.offset * 2;
            if (to >= this.data.last_page) {
                to = this.data.last_page;
            }
            let pages = [];
            for (let page = from; page <= to; page++) {
                pages.push(page);
            }
            return pages;
        },
    },
    methods: {
        change: function (page) {
            this.data.current_page = page;

            this.$inertia.get(
                route(route().current(), {
                    ...route().params,
                    page,
                })
            );
        },
    },
};
</script>