In this episode, we're diving into an easy way to set up and customize pagination when building a Laravel + Inertia app. We start from scratch—spinning up a fresh Laravel project, installing Inertia, running migrations, and whipping up a users page that will eventually display paged data.
First, we walk through creating dummy data using Laravel factories so that we have plenty of users to paginate through. Then, we learn how to structure our paginated data with API resources and send that clean data over to the Inertia Vue component.
On the frontend, we dump out and inspect the structure of the paginated data, learning about the payload's data
, meta
, and links
properties. We see how these make our life easier by providing all the info we need to build a custom pagination component.
Next up: building the pagination component in Vue. We go line by line, making sure to support clickable page numbers, previous/next controls, handling of "..." dividers, and of course, preventing page refreshes by using Inertia's Link component. Styling gets some love too, making the current page highlighted and inactive links faded out for clarity.
We also look at how to keep the user's scroll position when clicking between pages, using Inertia's preserve-scroll
feature. That way, pagination feels smooth and snappy.
Finally, we top it off by customizing the look of the previous/next arrows by publishing and tweaking Laravel's pagination language files—making sure your app's look stays consistent.
By the end, you’ll know exactly how to roll your own flexible, good-looking pagination in Inertia, and have plenty of tips to adjust things to your taste.