In this tutorial you will learn about the Laravel Inertia JS Pagination Tutorial and its application with practical example.
In this Laravel Inertia JS Pagination Tutorial I will show you how to integrate Inertia js pagination in laravel 8 application. In this tutorial you will learn to integrate pagination using inertia js and Laravel Breeze from scratch. In this step by step guide on how to add pagination in laravel application using inertia js. In this example we will be using laravel breeze with inertia js to implement pagination in laravel application.
Laravel Inertia JS Pagination Tutorial
In this laravel inertia js pagination example I will demonstrate you how to implement pagination in laravel using inertia js. Please follow instruction given below:
- Step 1: Download Laravel Fresh App
- Step 2: Add Database Detail
- Step 3: Install Laravel Breeze
- Step 4: Add Routes
- Step 5: Create Controller By Command
- Step 6: Add Page and Component
- Step 7: Run Development Server
Step 1: Download Laravel Fresh App
First of all we need to create a fresh laravel project, download and install Laravel 8 using the below command
|
1 |
composer create-project --prefer-dist laravel/laravel blog |
Step 2: Add Database Details
Now, lets create a MySQL database and connect it with laravel application. After creating database we need to set database credential in application’s .env file.
|
1 2 3 4 5 6 |
DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=here your database name here DB_USERNAME=here database username here DB_PASSWORD=here database password here |
Step 3: Install Laravel Breeze
In this step, we will install Breeze Package via the composer dependency manager. Use the following command to install Breeze Package .
|
1 2 3 4 5 6 7 |
composer require laravel/breeze --dev php artisan breeze:install --inertia npm install npm run dev |
Now, run the migration to create database table using following artisan command:
|
1 |
php artisan migrate |
Step 4: Add Routes
After this, we need to define routes in “routes/web.php” file. Lets open “routes/web.php” file and add the following routes in it.
routes/web.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
<?php use Illuminate\Foundation\Application; use Illuminate\Support\Facades\Route; use Inertia\Inertia; use App\Http\Controllers\UserController; /* |-------------------------------------------------------------------------- | Web Routes |-------------------------------------------------------------------------- | | Here is where you can register web routes for your application. These | routes are loaded by the RouteServiceProvider within a group which | contains the "web" middleware group. Now create something great! | */ 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('users', [UserController::class, 'index']); require __DIR__.'/auth.php'; |
Step 5: Create Controller By Command
Now, lets create a controller named UserController using command given below –
|
1 |
php artisan make:controller UserController |
Now, put the following code in app\Http\Controllers\UserController.php file.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<?php namespace App\Http\Controllers; use Illuminate\Http\Request; use App\Models\User; use Inertia\Inertia; class UserController extends Controller { /** * Write code on Method * * @return response() */ public function index() { $users = User::orderBy('id', 'desc') ->paginate(5); return Inertia::render('Users', [ 'users' => $users ]); } } |
Step 6: Add Page and Component
Next step, go to resources/assets/js/Pages/ folder and create a filed called Users.vue. And update the following code into your Users.vue components file:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
<template> <layout title="Users"> <div class="container"> <h1>Laravel Inertia JS Pagination Example</h1> <table class="table border w-full"> <thead> <tr> <th class="border p-3">ID</th> <th class="border p-3">Name</th> <th class="border p-3">Email</th> </tr> </thead> <tbody> <tr v-for="user in users.data" :key="user.id"> <td class="border p-3">{{ user.id }}</td> <td class="border p-3">{{ user.name }}</td> <td class="border p-3">{{ user.email }}</td> </tr> </tbody> </table> <pagination class="mt-6" :links="users.links" /> </div> </layout> </template> <script> import Pagination from '@/Components/Pagination' export default { components: { Pagination }, props: { users: Object, }, } </script> |
Now open resources/assets/js/Components/ and open the /Pagination..vue component file and add the following code into it:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<template> <div v-if="links.length > 3"> <div class="flex flex-wrap -mb-1"> <template v-for="(link, k) in links" :key="k"> <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> |
Step 7: Run Development Server
Now we are ready to run our example so lets start the development server using following artisan command –
|
1 2 3 |
npm run dev php artisan serve |
Now, open the following URL in browser to see the output –
|
1 |
localhost:8000/users |
