Laravel 9 Inertia Vue 3 Pagination Example

In this short tutorial we will see how to pagination in laravel 9 using inertia vue 3. For this section we will use Vue 3 SFCs method <script setup>.


CategoryController.php

/**
    * Display a listing of the resource.
    *
    * @return \Illuminate\Http\Response
    */
public function index()
{
    $categories = Category::latest('id')->paginate(2);
    return Inertia::render(
        'Category/Index',
        [
            'categories' => $categories
        ]
    );
}


Create Pagination vue 3 component

Components/Pagination.vue

<script setup>
import { Link }  from '@inertiajs/inertia-vue3';

defineProps({
    data: {
        type: Object,
        default: () => ({}),
    },
});
</script>


<template>
    <div v-if="data.links.length > 3" class="flex justify-center mt-4 space-x-4">
        <Link
            v-for="(link, k) in data.links"
            :key="k"
            class="px-4 py-3 text-sm leading-4 bg-white rounded hover:bg-white focus:text-indigo-500 hover:shadow"
            :class="{'bg-indigo-400 text-white': link.active}"
            :href="link.url"
            v-html="link.label"
        />
    </div>
</template>


Add pagination component.

<Pagination :data="categories"/>


Category/Index.vue

<script setup>
import BreezeAuthenticatedLayout from "@/Layouts/Authenticated.vue";
import { Head } from "@inertiajs/inertia-vue3";
import BreezeButton from "@/Components/Button.vue";
import { Link } from "@inertiajs/inertia-vue3";
import { Inertia } from "@inertiajs/inertia";
import Pagination from "@/Components/Pagination.vue";

const props = defineProps({
    categories: {
        type: Object,
        default: () => ({}),
    },
});
function destroy(id) {
    if (confirm("Are you sure you want to Delete")) {
        Inertia.delete(route("category.destroy", id));
    }
}
</script>

<template>
    <Head title="Category" />

    <BreezeAuthenticatedLayout>
        <template #header>
            <h2 class="text-xl font-semibold leading-tight text-gray-800">
                Category
            </h2>
        </template>

        <div class="py-12">
            <div class="mx-auto max-w-7xl sm:px-6 lg:px-8">
                <div
                    v-if="$page.props.flash.message"
                    class="p-4 mb-4 text-sm text-green-700 bg-green-100 rounded-lg dark:bg-green-200 dark:text-green-800"
                    role="alert"
                >
                    <span class="font-medium">
                        {{ $page.props.flash.message }}
                    </span>
                </div>
                <div class="overflow-hidden bg-white shadow-sm sm:rounded-lg">
                    <div class="p-6 bg-white border-b border-gray-200">
                        <div class="mb-2">
                            <Link :href="route('category.create')">
                                <BreezeButton>Add Category</BreezeButton></Link
                            >
                        </div>
                        <div
                            class="relative overflow-x-auto shadow-md sm:rounded-lg"
                        >
                            <table
                                class="w-full text-sm text-left text-gray-500 dark:text-gray-400"
                            >
                                <thead
                                    class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400"
                                >
                                    <tr>
                                        <th scope="col" class="px-6 py-3">#</th>
                                        <th scope="col" class="px-6 py-3">
                                            Category name
                                        </th>
                                        <th scope="col" class="px-6 py-3">
                                            Slug
                                        </th>
                                        <th scope="col" class="px-6 py-3">
                                            Created At
                                        </th>
                                        <th scope="col" class="px-6 py-3">
                                            Edit
                                        </th>
                                        <th scope="col" class="px-6 py-3">
                                            Delete
                                        </th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr
                                        v-for="category in categories.data"
                                        :key="category.id"
                                        class="bg-white border-b dark:bg-gray-800 dark:border-gray-700"
                                    >
                                        <th
                                            scope="row"
                                            class="px-6 py-4 font-medium text-gray-900 dark:text-white whitespace-nowrap"
                                        >
                                            {{ category.id }}
                                        </th>
                                        <th
                                            scope="row"
                                            class="px-6 py-4 font-medium text-gray-900 dark:text-white whitespace-nowrap"
                                        >
                                            {{ category.name }}
                                        </th>
                                        <td class="px-6 py-4">
                                            {{ category.slug }}
                                        </td>
                                        <td class="px-6 py-4">
                                            {{ category.created_at }}
                                        </td>

                                        <td class="px-6 py-4">
                                            <Link
                                                :href="
                                                    route(
                                                        'category.edit',
                                                        category.id
                                                    )
                                                "
                                                class="px-4 py-2 text-white bg-blue-600 rounded-lg"
                                                >Edit</Link
                                            >
                                        </td>
                                        <td class="px-6 py-4">
                                            <BreezeButton
                                                class="bg-red-600"
                                                @click="destroy(category.id)"
                                            >
                                                Delete
                                            </BreezeButton>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <Pagination :data="categories" />
                    </div>
                </div>
            </div>
        </div>
    </BreezeAuthenticatedLayout>
</template>
laravel inertia vue 3 pagination

laravel inertia vue 3 pagination


Read Also

Laravel 9 Inertia Vue 3 File Upload Example

Laravel 9 Inertia Vue 3 Form Submit Example

Laravel 9 Inertia Vue 3 Search & Filter Example

Laravel 9 Install Inertia js Server-side rendering (SSR)

Laravel 9 with Inertia Vue 3 Implement Flash Message

Laravel 9 Inertia Vue 3 CRUD Tutorial Example

Laravel Inertia Vue 3 Form Validation

How to Delete Record in Laravel 9 with Inertia Vue 3