Laravel 8 Inertia JS Pagination Example From Scratch

Hello artisan in this laravel inertia js pagination example i will show you step by step that how we can create pagination in our Laravel inertia js application. So it is definitely we can say that this article is going to be focused on laravel inertia js pagination example. And finally of course you'll learn how to create laravel inertia js pagination. 

I will give you simple and easy step by step simple example of how to add pagination using laravel inertia js. In this inertia js pagination example we will use laravel breeze with inertia to creating this example. 

So let's follow few step to paginate with laravel inertia js:

Step 1: Install Laravel 8 

First step we will install Laravel 8 application using bellow command, So open your terminal OR command prompt and run bellow command:

composer create-project --prefer-dist laravel/laravel blog

Step 2: Install Laravel Breeze

In this step we need to install laravel breeze with inertia, So open your terminal OR command prompt and run bellow command:

composer require laravel/breeze --dev

And then now, install breeze with inertia and also run migration using bellow command:

php artisan breeze:install --inertia
  
npm install
  
npm run dev
  
php artisan migrate

Step 3: Add Route

In this third step, we will create one route for list of all users, add users route here. So, let's add new route on that file.

routes/web.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 4: Create Controller

In this fourth step, now we need to create UserController with index methods, in this method we will write code of return inertia view. So let's create controller:

app/Http/Controllers/UserController.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 5: Create Page and Component

in this fifth step, we need to add pagination component and user vue page. let's add as bellow:

resources/js/Pages/Users.vue

resources/js/Components/Pagination.vue

All are set to. Now we have to compile our js file to show this output and our vue code. So you can simple run bellow command:

npm run dev

After compiling js assets nnd now visit this following url:

Read also: Laravel Group By Week Query Example

Hope it can help you.