Laravel Inertia and Vue Pagination Example

1 year ago admin Laravel

In today's lesson, we are going to see how to use pagination with Laravel Inertia js and Vue js, let's assume that we have a task application and we want to display data paginated.


Create the controller

Inside the controller, we retrieve all the tasks paginated.

                                                        
                                                                                                                        
<?php

namespace App\Http\Controllers;

use App\Models\Task;
use Illuminate\Http\Request;
use Inertia\Inertia;

class TaskController extends Controller
{
    /**
     * Display a listing of the resource.
     */
    public function index()
    {
        //
        $tasks = Task::with('category')->paginate(5);
        return Inertia::render('Tasks/Index',[
            'tasks' => $tasks
        ]);
    }
}

Display the data

Next, inside our component, we get the tasks and we display them paginated.

Demo

                                                            
                                                                                                                                
<template>
    <div class="container">
      <div className='row my-5'>
        <div className="col-md-9">
          <div className="card">
            <div className="card-body">
              <table className="table">
                  <thead>
                      <tr>
                          <th>ID</th>
                          <th>Title</th>
                          <th>Body</th>
                          <th>Done</th>
                          <th>Category</th>
                          <th>Created</th>
                          <th></th>
                      </tr>
                  </thead>
                <tbody>
                  <tr v-for="task in tasks.data" :key="task.id">
                    <td>{{ task.id }}</td>
                    <td>{{ task.title }}</td>
                    <td>{{ task.body }}</td>
                    <td v-if="task.done">
                      <span class="badge bg-success">
                        Done
                      </span>
                    </td>
                    <td v-else>
                      <span class="badge bg-danger">
                        Processing...
                      </span>
                    </td>
                    <td>{{ task.category.name }}</td>
                    <td>{{ task.created_at }}</td>
                    <td></td>
                  </tr>
                </tbody>
              </table>
              <div className="my-4 d-flex justify-content-center">
                  <ul className="pagination">
                      <li v-for="(link, index) in tasks.links" :key="index" 
                          :class="`page-item ${link.active ? 'active' : ''}`">
                          <Link
                              v-if="link.url !== null"
                              :href="link.url"
                              className="page-link"
                              v-html="link.label">
                          </Link>
                          <div
                              v-else
                              className="page-link"
                              v-html="link.label">
                          </div>
                      </li>
                  </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
</template>

<script setup>
  import { Link } from '@inertiajs/vue3'; 
  
  const props = defineProps({
    tasks: {
      type: Object,
      required: true
    }
  });
</script>

<style scoped>
</style>

Popular Tutorials

Related Tutorials

How to Override Laravel Fortify Default Registration Redirect

In this lesson, we will see how to override Laravel Fortify default registration redirect, sometimes...


How to Override Laravel Fortify Default Login Redirect

In this lesson, we will see how to override Laravel Fortify default login redirect, sometimes when w...


How to Use the Same Validation Form Request for both Create and Update in Laravel

In this lesson, we will see how to use the same validation form request for both create and update i...


How to Get Raw SQL Output from the Eloquent Model in Laravel 11

In this lesson, we will see how to get raw SQL output from the eloquent model in Laravel 11, sometim...


How to Check if a Record Does Not Exist in Laravel

in this lesson, we will see how to check if a record does not exist in laravel, sometimes you need t...


How to Check if a Record Exists in Laravel

in this lesson, we will see how to check if a record exists in laravel, sometimes you need to check...


How to Decrement Multiple Fields in Laravel

In this lesson, we will see how to decrement multiple fields in Laravel, in the old versions of lara...


How to Increment Multiple Fields in Laravel

In this lesson, we will see how to increment multiple fields in Laravel, in the old versions of lara...


How to Use the Same Request Validation Rules for Storing and Updating in Laravel

In this lesson, we will see how to use the same request validation rules for storing and updating in...


How to Go Back to the Previous URL in Laravel Blade

In this lesson, we will see how to go back to the previous URL in Laravel Blade, sometimes we need t...