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
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
