Laravel inertia js pagination example. In this tutorial, you will learn how to display data in table with pagination using inertia js and laravel app.
And this tutorial will help you step by step on how to add pagination using laravel inertia js. And use laravel breeze with inertia to creating this example. you can easily use it with laravel 6, laravel 7 and laravel 8 version.
Laravel 8 Inertia JS Pagination Tutorial
Just follow the below steps and display data in table with pagination using inertia js and laravel app:
- 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
In this step, you need to install laravel latest application setup, So open your terminal OR command prompt and run the following command:
composer create-project --prefer-dist laravel/laravel blog
Step 2: Add Database Details
After successfully install laravel Application, Go to your project .env file and set up database credential and move next step:
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, open your terminal and execute the following command on it to install laravel breeze:
composer require laravel/breeze --dev php artisan breeze:install --inertia npm install npm run dev
Next, migrate the table using the below command:
php artisan migrate
Step 4: Add Routes
Next step, go to routes folder and open web.php file and add the following routes into your file:
routes/web.php
<?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
Next step, open your command prompt and run the following command to create a controller by an artisan:
php artisan make:controller UserController
After that, go to app\Http\Controllers and open UserController.php file. Then update the following code into your UserController.php file:
<?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:
<template>
<layout title="Users">
<div class="container">
<h1>Laravel Inertia JS Pagination Example - Tutsmake.com</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:
<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
Run the following command to start development server:
npm run dev php artisan serve
Then open your browser and hit the following url on it:
localhost:8000/users
Conclusion
Laravel inertia js pagination example. In this tutorial, you have learned how to display data in table with pagination using inertia js and laravel app.
