Laravel Vue Inertia.js Pagination: A Complete Guide

Pagination is an essential feature for any web application that displays large amounts of data. It allows users to navigate through the data in manageable chunks, improving user experience and performance. When working with Laravel, Vue.js, and Inertia.js, implementing pagination requires a specific approach that leverages the strengths of each technology. This guide will walk you through the process of creating a complete pagination system using these tools.

Understanding the Stack

Before diving into the implementation, let’s briefly understand the role of each technology in our stack:

• Laravel: The backend framework responsible for handling data retrieval, processing, and preparing the data for the frontend.
• Vue.js: The frontend JavaScript framework used to build interactive user interfaces and display the paginated data.
• Inertia.js: The glue that connects Laravel and Vue.js, allowing you to build single-page applications (SPAs) using server-side routing and controllers.

Laravel Backend Setup

First, let’s configure the Laravel backend to handle pagination. Assume you have a model named Post and you want to paginate the posts.

In your controller (e.g., PostController.php), use the paginate() method to retrieve the posts with pagination:

 public function index()
 {
  $posts = Post::paginate(10); // Paginate with 10 posts per page
  return Inertia::render('Posts/Index', [
  'posts' => $posts,
  ]);
 }
   

Here, Post::paginate(10) retrieves the posts with pagination, limiting each page to 10 posts. The Inertia::render() method passes the paginated data to the Vue.js component.

Vue.js Frontend Implementation

Now, let’s create the Vue.js component to display the paginated posts. Create a file named Index.vue in your resources/js/Pages/Posts directory.

 <template>
  <div>
  <h1>Posts</h1>
  <ul>
  <li v-for="post in posts.data" :key="post.id">
  {{ post.title }}
  </li>
  </ul>
  <div v-if="posts.links.length > 3">
  <div v-for="(link, key) in posts.links" :key="key">
  <Link :href="link.url" v-if="link.url" :class="{'active': link.active}">
  <span v-html="link.label" />
  </Link>
  </div>
  </div>
  </div>
 </template>
 

 <script>
 import { Link } from '@inertiajs/vue3';
 export default {
  components: {
  Link,
  },
  props: {
  posts: Object,
  },
 };
 </script>
 

 <style scoped>
 .active span {
  font-weight: bold;
 }
 </style>
   

In this component:

• posts.data contains the array of posts for the current page.
• posts.links contains the pagination links generated by Laravel.
• The <Link> component from @inertiajs/vue3 is used to create Inertia-aware links that handle page navigation without full page reloads.

Inertia.js Routing

Ensure your routes are set up correctly in routes/web.php:

 use App\Http\Controllers\PostController;
 use Illuminate\Support\Facades\Route;
 

 Route::get('/posts', [PostController::class, 'index'])->name('posts.index');
   

This route maps the /posts URL to the index method in your PostController.

Styling the Pagination Links

You can customize the appearance of the pagination links using CSS. The example above includes a simple style to highlight the active page. Feel free to add more styles to match your application’s design.

Customizing Pagination

Laravel provides several ways to customize pagination. You can change the number of items per page, the query parameter used for the page number, and the pagination view.

Changing the Number of Items per Page

You can dynamically change the number of items per page by passing it as a parameter to the paginate() method:

 $perPage = request('per_page', 10); // Get per_page from request, default to 10
 $posts = Post::paginate($perPage);
   

Custom Pagination View

To customize the HTML structure of the pagination links, you can publish the default pagination view and modify it:

 php artisan vendor:publish --tag=laravel-pagination
   

This will copy the pagination views to resources/views/vendor/pagination. You can then modify the default.blade.php file to suit your needs. However, when using Inertia.js, it is more common to handle the pagination rendering in the Vue.js component as shown in the example above.

SEO Considerations

When implementing pagination, it’s important to consider SEO best practices:

• Use rel=”next” and rel=”prev” attributes: These attributes tell search engines about the relationship between paginated pages. While Inertia doesn’t directly handle these, you can add them to your layout.
• Canonical URLs: Ensure that each paginated page has a canonical URL to avoid duplicate content issues.
• Optimize page load times: Pagination helps improve page load times by reducing the amount of data loaded on each page.

Finding the best laravel developer is crucial for building robust and scalable web applications. A skilled developer can ensure your pagination is not only functional but also optimized for performance.

The ability to adapt and deliver exceptional user interfaces is where the top vue developer truly shines. With expertise in component-based architecture, state management, and reactive data binding, they create seamless and engaging user experiences that drive conversions.

In today’s competitive market, it’s more important than ever to find and Hire react developer who can deliver exceptional results.

By following this guide, you can implement a robust and user-friendly pagination system in your Laravel, Vue.js, and Inertia.js application. This will improve the user experience, optimize performance, and enhance SEO.

Laravel Fullstack provides remote tech resources, including Laravel developers, React.js, Vue.js, Python, agentic AI developers, SEO, and content writing services. Visit Laravel Fullstack to learn more.