In this article, we will see how to create laravel 10 vue 3 pagination with vite. Here, we will learn about vue 3 pagination with vite in laravel 10. Enhance your web application's user experience by implementing pagination with Vue 3 and Vite.

Follow this guide to seamlessly integrate pagination into your Vue 3 projects, leveraging the speed and efficiency of Vite's build tool. Learn the step-by-step process to set up Vue 3, utilize Vite's advantages, and create dynamic pagination components to efficiently navigate and display large datasets. Elevate your Vue 3 development with Vite-powered pagination.

Pagination is a crucial feature for managing large datasets and improving navigation within your application. With Vue 3's enhanced reactivity and Vite's blazing-fast build tool, you can create dynamic and efficient pagination components that seamlessly integrate into your Vue projects.

Vue 3, the latest version of the popular JavaScript framework, introduces powerful features like the Composition API and enhanced reactivity, making it easier than ever to build robust and scalable applications.

Vite, a next-generation build tool, offers lightning-fast development and hot module replacement, significantly improving the development experience.

By combining Vue 3's capabilities with Vite's performance benefits, you can create a responsive and interactive pagination system. This allows users to navigate through paginated content effortlessly, reducing load times and improving overall responsiveness.

In this guide, you'll learn step-by-step how to set up Vue 3 and leverage Vite's advantages. You'll discover how to create reusable pagination components that dynamically update content based on user interactions. Additionally, you'll explore techniques for making efficient API calls, handling server-side pagination, and updating the UI seamlessly.

To create Laravel 10 Vue 3 pagination with Vite, follow these steps:

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

composer create-project --prefer-dist laravel/laravel larave-vue-pagination

 

Laravel 10 comes with built-in pagination support. However, to make it compatible with Vue 3 and Vite, we'll use the "laravel-vue-pagination" package. Install the package using the following command.

npm install laravel-vue-pagination

 

• Laravel 10 has built-in support for Vue.js. To use Vue 3 and Vite, make the necessary changes to the default configuration.
• Install Vue 3 and Vite by following the official documentation.
• Update the package.json file with the necessary dependencies and scripts.
• Create a resources/js directory if it doesn't exist and move your Vue components to that directory.

resources/js/app.js

require('./bootstrap');

window.Vue = require('vue').default;

Vue.component('users', require('./components/Users.vue').default);

const app = new Vue({
    el: '#app',
});

 

 

• Create a new Vue component for pagination. For example, create a file named Users.vue in the resources/js/components directory.
• Add the necessary markup and logic for the pagination component.
• Ensure to emit events or use props to pass the necessary pagination data to the component.

resources/js/components/Users.vue

<template>
    <div class="container my-5">
        <div class="row justify-content-center">
            <div class="col-md-10">
                <div class="card">
                    <div class="card-header text-center">
                        <h2>How to Create Laravel 10 Vue 3 Pagination with Vite - Techsolutionstuff</h2>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-bordered text-center">
                                <thead>
                                    <tr>
                                        <th>ID</th>
                                        <th>Name</th>
                                        <th>Email</th>
                                    </tr>
                                </thead>
                                <tbody v-if="users && users.data.length > 0">
                                    <tr v-for="(user,index) in users.data" :key="index">
                                        <td>{{ user.id }}</td>
                                        <td>{{ user.name }}</td>
                                        <td>{{ user.email }}</td>
                                    </tr>
                                </tbody>
                                <tbody v-else>
                                    <tr>
                                        <td align="center" colspan="3">No record found.</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <pagination align="center" :data="users" @pagination-change-page="list"></pagination>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import pagination from 'laravel-vue-pagination'
    export default {
        name:"users",
        components:{
            pagination
        },
        data(){
            return {
                users:{
                    type:Object,
                    default:null
                }
            }
        },
        mounted(){
            this.list()
        },
        methods:{
            async list(page=1){
                await axios.get(`/api/users?page=${page}`).then(({data})=>{
                    this.users = data
                }).catch(({ response })=>{
                    console.error(response)
                })
            }
        }
    }
</script>

<style scoped>
    .pagination{
        margin-bottom: 0;
    }
</style>

 

In the web.php file add the below code to the file.

use App\Http\Controllers\API\UserController;

Route::get('/users',[UserController::class,'index']);

 

• In your Laravel controller method that fetches the paginated data, utilize Laravel's built-in pagination feature.
• Pass the paginated data to the view or API response.

App\Http\Controllers\API\UserController

<?php

namespace App\Http\Controllers\API;

use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
use App\Models\User;

class UserController extends Controller
{
    public function index(){
        $users = User::paginate(10);
    	return response()->json($users);
    }
}

 

• Include the Vue app and Vite assets in your Blade template or Vue component.
• Use the <pagination> the component in your template and pass the necessary props or events.

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>How to Create Laravel 10 Vue 3 Pagination with Vite - Techsolutionstuff</title>
        <link rel="stylesheet" type="text/css" href="{{ mix('css/app.css') }}">
    </head>
    <body>
        <div id="app">
            <users></users>
        </div>
        <script type="text/javascript" src="{{ mix('js/app.js') }}"></script>
    </body>
</html>

Now run the below command to update the app.js file:

npm run dev

 

---

You might also like: 

• Read Also: Vue JS Get Current Date And Time
• Read Also: Laravel 10 Vue JS Auth Scaffolding Example
• Read Also: How To Create Laravel 9 With Vue JS CRUD Operation
• Read Also: How To Install Vue 3 In Laravel 9 With Vite Step By Step