How to: Laravel 9 Vue Inertia Pagination Integration Tutorial

A comprehensive guide on Pagination Integration with Vue and Inertia in Laravel. You will learn how to integrate pagination in a Laravel app using the popular inertia JavaScript and Laravel Breeze package from scratch.

Moreover, using Laravel Breeze, we need minimal and simple origin point to develop a Laravel application with authentication.

We will style it with Tailwind, Breeze demonstrates authentication through controllers and views in our application that can be effortlessly customized as per our application’s requirements.

Inertia js provides an exorbitant new method to create classic server-driven web applications, calling it a modern development block.

Use of Inertia helps us build a fully client-side rendered, single-page applications without any complexity. This comes with a modern single-page application that greatly extends to server-side frameworks.

This tutorial on Laravel inertia js pagination example will guide us to create a pagination application, sharing step by step instructions. We will implement pagination in Laravel using inertia.js. Moreover, if you are willing to add pagination in backward versions of Laravel, you can follow this guide for Laravel version 7 and Laravel version 6.

Integrate Inertia Pagination using Vue

Step 1: Create Laravel App
Step 2: Connect to Database
Step 2: Add Breeze Package in Laravel
Step 3: Set Up Controller
Step 4: Add Routes
Step 5: Create View in Laravel Vue
Step 6: Run Laravel Project

Create Laravel App

Composer is a tool required to create a new Laravel application. it is a prequistive before starting up your Laravel applications.

Next, execute the command given below, if you have already installed the app, you can skip this step.

composer create-project --prefer-dist laravel/laravel laravel-inertia-pagination

Navigate to the app folder.

cd laravel-inertia-pagination

Connect to Database

Secondly, you have to open the .env configuration file. Update your database name, username, password and other details into the file to make the database connection.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=database_name
DB_USERNAME=database_user_name
DB_PASSWORD=database_password

If you are using the MAMP local server in macOs. Make sure to add UNIX_SOCKET and DB_SOCKET below in the database credentials .env file.

UNIX_SOCKET=/Applications/MAMP/tmp/mysql/mysql.sock
DB_SOCKET=/Applications/MAMP/tmp/mysql/mysql.sock

Add Breeze Package in Laravel

Installing the Laravel breeze package is pretty easy, you just need to execute the command given below to start the installation.

composer require laravel/breeze --dev

Once Composer has installed the Laravel Breeze package, you can run the breeze:install Artisan command.

This command will help publish authentication views, routes, controllers, and other resources required for your application.

Laravel Breeze publishes all its code to your application that makes you have complete command and clarity over all its features and implementation. Once it is installed, you need to compile your assets so that the application’s CSS file is available.

php artisan breeze:install --inertia
npm install
npm run watch
php artisan migrate

We can create the test data for showing all User records with pagination. So, open your terminal and execute the Laravel factory tinker command as shown below.

php artisan tinker

Get inside the Psy Shell and run the command given below to generate 100 user records.

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

Set Up Controller

In this section, we will generate a new controller file and name it as UserDataController. Here, we will import Inertia, and User model to fetch User records based on pagination numbers.

php artisan make:controller UserDataController

You need to add the code given below in the app\Http\Controllers\UserDataController.php file.

<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Inertia\Inertia;
use App\Models\User;
class UserDataController extends Controller
{
    public function index()
    {
        $usersList = User::orderBy('id', 'desc')
                        ->paginate(6);
  
        return Inertia::render('UserView', [
            'usersList' => $usersList
        ]);
    }
}

Add Routes

Next, open the routes/web.php file. and add the Inertia service controller to add the route for the Laravel inertia pagination example.

<?php
  
use Illuminate\Foundation\Application;
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\UserDataController;
use Inertia\Inertia;
  
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
*/
  
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');
 
Route::get('list-users', [UserDataController::class, 'index']);
  
require __DIR__.'/auth.php';

Create View in Laravel Vue

Let us create a view in Laravel Vue. In your components file, we will render the users’ collection from the database and, specifically those categorized by pagination.

Next, open and update the resources/js/Pages/UserView.vue file, and add the code given below.

<template>
  <layout title="Users">
    <div class="container mt-5">
      
      <h2>Laravel Inertia JS Pagination Demo</h2>
      <table class="table w-full">
        <thead>
          <tr>
            <th>#ID</th>
            <th>Name</th>
            <th>Email</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="item in usersList.data" :key="item.id">
            <td>{{ item.id }}</td> 
            <td>{{ item.name }}</td>
            <td>{{ item.email }}</td>
          </tr>
        </tbody>
      </table>
  
      <pagination class="mt-6" :links="usersList.links" />
    </div>
  </layout>
</template>
  
<script>
import Pagination from '@/Components/Pagination'
  
export default {
  components: {
    Pagination
  },
  props: {
    usersList: Object,
  },
}
</script>

Next, we need to create a components directory and a pagination.vue file in the resources/js folder.

Finally, you may open the resources/js/components/pagination.vue file and add the code shown below.

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