Laravel Vue Inertia pagination tutorial; This comprehensive guide will help you understand how to integrate pagination in the laravel app using the very popular inertia javascript and Laravel Breeze from scratch.
Also, we will use Laravel Breeze; this package offers a minimal and simple origin point for developing a Laravel application with authentication.
Styled with Tailwind, Breeze proclaims 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 classic server-driven web applications, and they call it a modern monolith.
With the help of Inertia, you can build entirely client-side rendered, single-page apps with needless complexity, which comes with the modern single-page application. It profoundly extends server-side frameworks.
This laravel inertia js pagination example 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 10
- 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-paginationMove into the app folder:
cd laravel-inertia-paginationConnect 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_passwordIf you are using MAMP local server in macOs; make sure to append UNIX_SOCKET and DB_SOCKET below database credentials in .env file.
UNIX_SOCKET=/Applications/MAMP/tmp/mysql/mysql.sock
DB_SOCKET=/Applications/MAMP/tmp/mysql/mysql.sockAdd 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 --devAfter 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 migrateWe 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 tinkerGet 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 UserDataControllerYou 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 serveHere is the url that you need to open in the browser to test the app.
http://127.0.0.1:8000/list-users
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.