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.
#laravel #laravel-8x #pagination #inertia-js #vue-js