How to Add Inertia Js Pagination in Laravel 9 Vue

Pagination categorize or display the ample amount of data into multiple pages, if you are working with Laravel Vue and want to know how to implement pagination in the Laravel Vue Js app then go through every instruction given in this tutorial.

We will tell you how to use inertia js with laravel breeze to integrate pagination in the laravel vue app.

Ideally, pagination is a way of giving each page a number. Every page holds some data; similarly, we will create the pagination component in laravel using Inertia js and laravel breeze to divide the tabular data into pages.

We will create a single-page application by using the Vue js ecosystem in the laravel app.

To ramp up the laravel vue js pagination concept, we will use inertia js. Building a SPA is far easier with inertia; you can create an entirely client-side rendered, single-page app.

How to Integrate Inertia Js Pagination in Laravel 9

  • Step 1: Download Laravel Project
  • Step 2: Update Database Details in ENV
  • Step 2: Install Breeze and Inertia
  • Step 3: Add Fake Records in Database
  • Step 4: Build New Controller
  • Step 5: Register New Routes
  • Step 6: Setting Up View
  • Step 7: Start Application

Download Laravel Project

Begin the laravel development by installing the latest version laravel app; after downloading it, enter it into the project folder.

composer create-project --prefer-dist laravel/laravel my-laravel-app
cd my-laravel-app

Update Database Details in ENV

The database has to be connected with laravel because we have to deal with the data, so update the database name, user name, and password in the .env configuration file.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=db_name
DB_USERNAME=db_username
DB_PASSWORD=db_password

Install Breeze and Inertia

Next, open command prompt, type given command to install breeze in laravel app.

composer require laravel/breeze --dev

Furthermore, publish controllers, routes, auth views, and imperative assets, thus execute the given command to configure inertia js.

php artisan breeze:install --inertia

Now, Breeze scaffolding has successfully installed. Next, execute the given commands to build your assets.

npm install

npm run watch

Let us migrate the default laravel migration file to database.

php artisan migrate

Add Fake Records in Database

Laravel Tinker offers a handy way to add dummy records into the database. So, go ahead and execute the Laravel tinker command through PHP artisan.

php artisan tinker

After executing the above command, run the command to create and add dummy records into the database.

User::factory()->count(100)->create()

Build New Controller

Further, run the command to generate a new controller; in this task, the PHP artisan command will help you execute the below command.

php artisan make:controller UserController

Update code in app\Http\Controllers\UserController.php, define the function to load the data from the database and wrap it in the paginate() method.

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\User;
use Inertia\Inertia;

class UserController extends Controller
{
    public function index()
    {
        $userRecords = User::orderBy('id', 'desc')->paginate(8);
        return Inertia::render('UserIndex', [
            'userRecords' => $userRecords
        ]);
    }
}

Register New Routes

Head over to routes/web.php file, create a new route, and register by tie it to the controller; route communicates with the controller and executes the functions defined in it.

<?php

use Illuminate\Foundation\Application;
use Illuminate\Support\Facades\Route;
use Inertia\Inertia;
use App\Http\Controllers\UserController;



Route::get('/show-users', [UserController::class, 'index']);

Route::get('/', function () {
    return Inertia::render('Welcome', [
        'canLogin' => Route::has('login'),
        'canRegister' => Route::has('register'),
        'laravelVersion' => Application::VERSION,
        'phpVersion' => PHP_VERSION,
    ]);
});

Route::get('/dashboard', function () {
    return Inertia::render('Dashboard');
})->middleware(['auth', 'verified'])->name('dashboard');

require __DIR__.'/auth.php';

Create Laravel Vue Pagination Component

Next, create a vue js UserIndex component file in the Pages folder, in this file we will add the code to show the tabular data with pagination to change the pages, so place the given code in the resources/js/Pages/UserIndex.vue file.

<template>
    <layout title="Users">
        <div class="container mt-4">
            <h2>Laravel Inertia JS Pagination Example</h2>
            <table class="table w-full">
                <thead>
                    <tr> 
                        <th>User id</th>
                        <th>Name</th>
                        <th>Email</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="user in userRecords.data" :key="user.id">
                        <td>{{ user.id }}</td>
                        <td>{{ user.name }}</td>
                        <td>{{ user.email }}</td>
                    </tr>
                </tbody>
            </table>

            <pagination class="mt-5" :links="userRecords.links" />
        </div>
    </layout>
</template>

<script>
    import Pagination from '@/Components/UserPagination'

    export default {
        components: {
            Pagination
        },
        props: {
            userRecords: Object
        },
    }

</script>

Next, create UserPagination.vue file in components folder, define the inertia pagination code in this file.

Make sure to update the resources/js/components/UserPagination.vue file.

<template>
    <div v-if="links.length > 3">
        <div class="flex flex-wrap -mb-1">
            <template v-for="(link, p) in links" :key="p">
                <div v-if="link.url === null" class="mr-1 mb-1 px-4 py-3 text-sm leading-4 text-gray-400 border rounded"
                    v-html="link.label" />
                <inertia-link v-else
                    class="mr-1 mb-1 px-4 py-3 text-sm leading-4 border rounded hover:bg-white focus:border-indigo-500 focus:text-indigo-500"
                    :class="{ 'bg-blue-700 text-white': link.active }" :href="link.url" v-html="link.label" />
            </template>
        </div>
    </div>
</template>

<script>
    export default {
        props: {
            links: Array
        },
    }
</script>

Start Laravel Application

Starting the laravel application is the last step, so invoke the given command to run the laravel app similarly use the provided url to view the app.

php artisan serve
http://127.0.0.1:8000/show-users

Add Inertia Js Pagination in Laravel

Conclusion

If you have gone through every step, respectively, then so far, you have managed to integrate inertia js pagination in the laravel vue app. Ideally, we taught you everything to implement pagination in the laravel app.

We covered some essential topics to create a basic laravel vue pagination app.

Be it installing the laravel app, creating dummy data into the database, creating a table in laravel, or adding vue js in laravel, we have included all. Thus, the laravel vue pagination tutorial is completed.