In this article, we will see the easiest way to create laravel 10 vue inertia pagination. Here, we will learn about how to create vue inertia pagination in laravel 10. In this comprehensive guide, we will simplify our development workflow and enhance our Laravel 10 and Vue.js projects with seamless pagination using Inertia.js.

We'll learn the simplest approach to implement pagination, leveraging the power of Inertia.js and the flexibility of Vue.js.

By following the step-by-step instructions provided, we can streamline our code, effortlessly manage paginated data, and elevate the user experience.

Let's discover how to effortlessly incorporate Inertia.js pagination into our Laravel 10 and Vue.js applications and optimize the way we handle paginated data.

Here's an outline for creating a Laravel 10 Vue Inertia pagination example.

1. Set up a Laravel 10 project
   1. Install Laravel 10
   2. Install Inertia.js and Vue.js
   3. Configure Inertia.js in Laravel
2. Database and Model
   1. Create a database and configure the connection
   2. Generate a model for the paginated data
3. Implement Pagination in Laravel Controller
   1. Retrieve the paginated data using Laravel's pagination feature
   2. Pass the data to the Inertia render method
4. Create Vue Pagination Component
   1. Create a Vue component for pagination
   2. Implement markup and logic for pagination
   3. Pass pagination data between Laravel controller and Vue component
5. Use the Pagination Component in Inertia Template
   1. Include the Vue pagination component in the Inertia template
   2. Pass necessary props or events to the component
6. Handle Pagination in Vue Component
   1. Handle events or props passed from the Laravel controller
   2. Make API requests to fetch paginated data based on user interaction
   3. Update the view with the fetched data
7. Test and Verify Pagination Functionality
   1. Run Laravel development server
   2. Navigate to the page with pagination
   3. Verify that the pagination component works as expected

Install Laravel 10 by following the official documentation. Create a new Laravel project using the following command.

composer create-project --prefer-dist laravel/laravel:^10.0 laravel-10-vue-interia-pagination

 

In this step, we will install a breeze. So, run the following command.

composer require laravel/breeze --dev

Now, we need to create authentication using the below command. you can create basic login, register, and email verification using vue js.

php artisan breeze:install vue

Now, let's install the node js package using the following command.

npm install

let's run vite using the following command.

npm run dev

After that, we need to run the migration command to create a database table.

php artisan migrate

 

 

Set up a database and configure the database connection in your Laravel project. Create a model representing the data you want to paginate.

Here, we will create a database migration for the Posts table and also we will create a model it.

php artisan make:migration create_posts_table

Migration:

<?php
  
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
  
return new class extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('posts', function (Blueprint $table) {
            $table->id();
            $table->string('title');
            $table->text('body');
            $table->timestamps();
        });
    }
  
    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('posts');
    }
}

Then, we will migrate the table to the database using the following command.

php artisan migrate

After that, we will create a Post.php model by using the following command.

php artisan make:model Post

App/Models/Post.php

<?php
  
namespace App\Models;
  
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
  
class Post extends Model
{
    use HasFactory;
  
    /**
     * The attributes that are mass assignable.
     *
     * @var array
     */
    protected $fillable = [
        'title', 'body'
    ];
}

 

In this step, we will create routes for vue.js interia pagination. So, create get and post routes it.

routes/web.php

<?php
 
use Illuminate\Foundation\Application;
use Illuminate\Support\Facades\Route;
use Inertia\Inertia;
use App\Http\Controllers\PostController;
  
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

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

Route::get('/', function () {
    return Inertia::render('Welcome', [
        'canLogin' => Route::has('login'),
        'canRegister' => Route::has('register'),
        'laravelVersion' => Application::VERSION,
        'phpVersion' => PHP_VERSION,
    ]);
});

Route::get('/dashboard', function () {
    return Inertia::render('Dashboard');
})->middleware(['auth', 'verified'])->name('dashboard');

 

• In your Laravel controller method, retrieve the paginated data using Laravel's built-in pagination feature.
• Pass the paginated data to the Inertia render method.

app/Http/Controllers/PostController.php

<?php
   
namespace App\Http\Controllers;
    
use Illuminate\Http\Request;
use Inertia\Inertia;
use App\Models\Post;
use Illuminate\Support\Facades\Validator;
   
class PostController extends Controller
{
    /**
     * Show the form for creating a new resource.
     *
     * @return Response
     */
    public function index()
    {
        $posts = Post::latest()
                    ->paginate(10);

        return Inertia::render('Posts/Index', ['posts' => $posts]);
    }
}

 

 

• Create a Vue component for pagination. For example, create a file named Pagination.vue in the resources/js/components directory.
• Implement the necessary markup and logic for the pagination component.
• Emit events or use props to pass pagination data between the Laravel controller and Vue component.

resources/js/Components/Pagination.vue

<template>
    <div v-if="links.length > 3">
        <div class="flex flex-wrap mt-8">
            <template v-for="(link, key) in links" :key="key">
                <div
                    v-if="link.url === null"
                    class="mr-1 mb-1 px-4 py-3 text-sm leading-4 text-gray-400 border rounded"
                    v-html="link.label"
                />

                <Link
                    v-else
                    class="mr-1 mb-1 px-4 py-3 text-sm leading-4 border rounded hover:bg-white focus:border-primary focus:text-primary"
                    :class="{ 'bg-blue-700 text-white': link.active }"
                    :href="link.url"
                    v-html="link.label"
                />
            </template>
        </div>
    </div>
</template>

<script>
import { defineComponent } from "vue";
import { Link } from "@inertiajs/inertia-vue3";
export default defineComponent({
    components: {
        Link,
    },
    props: {
        links: Array,
    },
});
</script>

 

In your Inertia template file (usually located in the resources/js/Pages directory), include the Vue pagination component and pass the necessary props or events.

resources/js/Pages/Posts/Index.vue

<script setup>
import BreezeAuthenticatedLayout from '@/Layouts/Authenticated.vue';
import { Head, Link, useForm } from '@inertiajs/inertia-vue3';
import Pagination from '@/Components/Pagination.vue'

defineProps({
    posts: Object,
});

</script>

<template>
    <Head title="Dashboard" />

    <BreezeAuthenticatedLayout>
        <template #header>
            <h2 class="font-semibold text-xl text-gray-800 leading-tight">
                The Easiest Way to Create Laravel 10 Vue Inertia Pagination - Techsolutionstuff
            </h2>
        </template>

        <div class="py-12">
            <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
                <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                    <div class="p-6 bg-white border-b border-gray-200">

                        <table className="table-fixed w-full">
                            <thead>
                                <tr className="bg-gray-100">
                                    <th className="px-4 py-2 w-20">No.</th>
                                    <th className="px-4 py-2">Title</th>
                                    <th className="px-4 py-2">Body</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr v-for="post in posts.data">
                                    <td className="border px-4 py-2">{{ post.id }}</td>
                                    <td className="border px-4 py-2">{{ post.title }}</td>
                                    <td className="border px-4 py-2">{{ post.body }}</td>
                                </tr>
                            </tbody>
                        </table>

                        <Pagination class="mt-6" :links="posts.links" />
                    </div>
                </div>
            </div>
        </div>
    </BreezeAuthenticatedLayout>
</template>

 

Run your Laravel development server and navigate to the page where you implemented the pagination. Verify that the pagination component works as expected, allowing you to navigate through the paginated data.

php artisan serve

After that, run npm using the following command.

npm run dev

If you want to build then you can run the following command:

npm run build

Then, open the below URL.

http://localhost:8000/login

 

---

You might also like: 

• Read Also: How To Use Sweet Alert In Vue JS
• Read Also: How To Use Google Bar Chart In Vue JS
• Read Also: Laravel 10 Livewire CRUD Operation Example
• Read Also: How To Override Auth Login Method In Laravel 10