Laravel Inertia JS Pagination Tutorial

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.

Recommended Laravel Posts

Related Posts