The easiest way to create Laravel Inertia pagination is to create a custom component that's reusable across different pages. One thing that you need to do on the backend side is to call the method that returns pagination and it should be straightforward after looking at the code.
First, you have to return the paginated modal from your controller and you can pass the number of data that you would like to paginate.
Laravel Back-end Pagination
First, you have to return the paginated modal from your controller and you can pass the number of data that you would like to paginate.
<?php
Route::get('/posts', function () {
return Inertia::render('Posts/PostList', [
'heroes' => \App\Models\Post::query()->paginate(40)
]);
})->name('posts.index');Inertia Js Front-end Pagination
Next, create a new Pagination.vue file and store the Pagination component. Do refer the code below for the full details.
<script setup>
import { Link } from '@inertiajs/inertia-vue3';
</script>
<script>
export default {
props: {
data: Object
},
}
</script>
<template>
<div v-if="data.links.length > 3" class="mt-4 flex justify-center space-x-4">
<Link
v-for="(link, k) in data.links"
:key="k"
class="px-4 py-3 text-sm leading-4 rounded hover:bg-white focus:text-indigo-500 hover:shadow bg-white"
:class="{'bg-indigo-400 text-white': link.active}"
:href="link.url"
v-html="link.label"
/>
</div>
</template>Make use of Laravel Livewire Pagination Component
To make use of this component on other pages you just have to import and pass in the data for the pagination component.
<Pagination :data="posts"/>
