Laravel Vue Inertia Pagination Integration Tutorial

Laravel Vue Inertia pagination tutorial; This comprehensive guide will help you to understand how you can integrate pagination in the laravel 8 app using the very popular inertia javascript and Laravel Breeze from scratch.

Also, we will use Laravel 8 Breeze; this package offers a minimal , simple origin point for developing a Laravel application with authentication. Styled with Tailwind, authentication controllers and views to your application that can be effortlessly customized based on your own application’s requirements.

Inertia js offers an exorbitant new method to create server-driven web applications, and they call it a modern monolith. With the help of Inertia, you can build client-side rendered, single-page apps with needless complexity, which comes with the modern single-page application. It profoundly extends server side framework

This laravel inertia js pagination guide will share bit by bit instructions to implement pagination in laravel using inertia js. Furthermore, if you are looking to add pagination in backward versions of laravel, you can follow this guide for laravel 7 and laravel 6.

How to Integrate Inertia Js Pagination in Laravel 8

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 the tool you need to create a new laravel app, so make sure to set up composer first and then execute the suggested command; if you have already installed the app, then skip this step.

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

Move into the app folder:

cd laravel-inertia-pagination

Connect to Database

Secondly, you have to open the .env configuration file and update the database name, username and password 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

Add Breeze Package in Laravel

Installing a laravel breeze package is easy; you need to execute the following command to begin the installation.

composer require laravel/breeze --dev

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

This command publishes the authentication views, routes, controllers, and other resources to your application.

Laravel Breeze publishes all of its code to your application so that you have total command and clarity over its features and implementation. After Breeze is installed, you also need to compile your assets so that your application’s CSS file is available:

php artisan breeze:install --inertia

npm install

npm run watch

php artisan migrate

We need to create the test data for showing the User records with pagination, so use open the terminal and execute the laravel factory tinker command.

php artisan tinker

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

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

Set Up Controller

In this section, we have to generate the new controller file we will name it UserDataController. We will import the Inertia, User model for fetching the User records based on the pagination numbers.

php artisan make:controller UserDataController

You need to add the given below code 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

In this section, we need to open the routes/web.php file and add the Inertia service controller for adding 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 the view in laravel vue; in this components file, we will render the users’ collection from the database and, most importantly, categorized by pagination.

After that, open and update the resources/js/Pages/UserView.vue file with the following code.

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

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

Lastly, open and add code in resources/js/components/pagination.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>

Run Laravel Project

We have just built the pagination feature now, and we need to start the laravel development server using the below command.

php artisan serve

Here is the url that you need to open in the browser to test the app.

http://127.0.0.1:8000/list-users

Laravel Inertia Pagination

Conclusion

We had described how you could build pagination in the laravel app using inertia JavaScript; in this tutorial, we used the single pagination module; however, you can explore new features with Inertia. We hope you liked this guide and will surely share it with others.