In this tutorial you will learn about the How to Add Inertia Js Pagination in Laravel 8 Vue and its application with practical example.
In this Laravel 8 Vue Inertia js pagination tutorial I will show you how to integrate Inertia pagination in the laravel 8. 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.
In this laravel 8 inertia js pagination example I will demonstrate you how to implement pagination in laravel using inertia js.
- 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
First of all we need to create a fresh laravel project, download and install Laravel 8 using the below command
|
|
composer create-project --prefer-dist laravel/laravel laravel-inertia-pagination |
Setup Database Credentials
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.
|
|
DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=database_name DB_USERNAME=database_user_name DB_PASSWORD=database_password |
Add Breeze Package in Laravel
In this step, we will install Breeze Package via the composer dependency manager. Use the following command to install Breeze Package .
|
|
composer require laravel/breeze --dev |
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 migrate |
Now, we will add some test data into database. Use the following command to add some test data:
Now, run the following command to generate 100 user records.
|
|
User::factory()->count(100)->create() |
Create Controller By Artisan Command
Now, lets create a controller named UserDataController using command given below –
|
|
php artisan make:controller UserDataController |
Now, put the following code in app\Http\Controllers\UserDataController.php file.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<?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 ]); } } |
Create 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 |
<?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
In this step we will create a blade view file. Open and update the resources/js/Pages/UserView.vue file with the following code.
