Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.
I am migrating my current application from Laravel Livewire to Laravel InertiaJS VueJS. Currently I am stuck at setting the per page count from the front end and paginate the data accordingly. Currently I am using Laravel's default pagination along with the custom pagination component for VueJS and it works seamlessly. I just want to set the $per_page as per the input, the variable is set to 5 by default, in the index method of the controller. Below is the code structure and the logic. Please help me achieve this in the way InertiaJS is meant to be used.
UserController.php
public function index(Request $request)
{
$per_page = \Request::get('per_page') ?: 5;
$query = User::select('id', 'name', 'email', 'role_id', 'created_at');
$users = $query->paginate($per_page);
return Inertia::render('Backend/Management/AudienceManagement/Users/Index', [
'users' => $users
]);
}
Users/Index.vue
<template>
<input-group borderless paddingless inline>
<input-select @change="setPerPage($event)" id="perPage" placeholder="Per Page">
<option value="5">5</option>
<option value="10">10</option>
</input-select>
</input-group>
</template>
<script>
import {
Inertia
} from '@inertiajs/inertia'
export default {
props: {
users: {
type: Object
}
},
data() {
return {
sortField: '',
sortDirection: ''
}
},
methods: {
setPerPage(event) {
console.log(event.target.value);
this.users.per_page = event.target.value;
Inertia.reload({
only: ['users.data']
});
},
}
}
</script>
Right now your controllers expect an URL that looks like this
example.com/users?per_page=3
It seems that the problem is that you're setting the value of the per_page on the paginated object, but the paginated object is a result of the query. Instead, you need to make sure the code in the backend (laravel) receives the per_page data in some way. This can be updating the URL from your frontend or settings some kind of session instead of using a query value from the URL.
Thanks for the revert @bobbybouwmann. In my Livewire project I used the session method to update the per page and added a lifecycle hook on the per page variable, as soon as the value will be updated, put the per page value in the sessions.
trait WithPerPagePagination
{
use WithPagination;
public $perPage = 10;
public function mountWithPerPagePagination()
{
$this->perPage = session()->get('perPage', $this->perPage);
}
public function updatedPerPage($value)
{
session()->put('perPage', $value);
}
public function applyPagination($query)
{
return $query->paginate($this->perPage);
}
}
Here is my updated code down below. I am trying to replicate the same above function in Laravel, Inertia, Vue. I have created a public variable for $perPage with a default value of 5. What I need to do now is, I need to link it to the drop down input. And after that as soon as I change the per page value, it should put the per page value in the session as I had done it in the previous project using session()->put('perPage', $value);
Class UserController extends Controller
{
public $perPage = 5;
public function index()
{
$this->perPage = session()->get('perPage', $this->perPage);
$query = User::select('id', 'name', 'email', 'role_id', 'created_at');
$users = $query->paginate($this->perPage);
return Inertia::render('Backend/Management/AudienceManagement/Users/Index', [
'users' => $users
]);
}
}
@bobbybouwmann Mate, you there?
But you need to tell the backend that the value has changed
.... this is not livewire, you don't get automatic data binding
Please help me with an example, I just don't know from where should I start. Your help we be really valued. Thank you for your time.
Please or to participate in this conversation.