Posts Learn Components Snippets Categories Tags Tools About
/

Laravel Inertia Pagination Component

Learn the way to create Laravel inertia pagination component the easy way

Created on Jun 13, 2022

802 views

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.

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

If you like our tutorial, do make sure to support us by being our Patreon or buy us some coffee ☕️

Load comments for Laravel Inertia Pagination Component

)