How to implement pagination in Laravel 9 + Inertia.js + Vue 3 stack

I was surprised to see that this wasn’t available out of the box. Thankfully there’s a 2 mins solution to the problem.

In this post I’m referring to the StackOverflow post by Jonathan Reinink, creator of Inertia.

Let’s start by creating a Vue.js component named “Pagination.vue”, preferably within a folder where you put your global components — if you don’t have one, just create a “Components” folder under /resources/js/.

Styling is handled via Tailwind CSS classes as expected, since it’s the default CSS framework included in Laravel + Inertia stack. You can replace class names to match Bootstrap or other frameworks though, if needed.

This is the content of your new pagination component:

Load your data in a paginated form in your controller as usual, and pass it to your Inertia view:

class PostsController extends Controller {
  
  public function index()
  {
    $posts = Post::paginate(10);
    return Inertia::render(‘Posts’, [
      ‘posts’ => $posts
    ]);
  }
}

Then in your Posts.vue component, import the Pagination component and use it by passing the posts prop.

(This component uses a single prop called “elements”, which is the pagination collection (posts) you’re going to load from your controller. I had initially named this prop as “data”, but I later found out that it might be confusing in the long term since pagination data array already has a “data” key containing the data to be paginated.)

You can see the result below.

It’s not different than the usual pagination component you’re used to see in Laravel blade files.

As you might already have noticed, the browser’s URL bar will also be tracking the page parameter unlike traditional AJAX pagination, as part of the way Inertia.js works.

Sorting and filtering results

If you later decide to implement searching and/or sorting features and you want to keep values while paginating, all you have to do is to append withQueryString() method to the existing query in your controller.

So the original posts query becomes:

$posts = Post::paginate(10)->withQueryString();