Simple Vue.js Pagination Example with Laravel

Pagination is a method for dividing content into several pages and creating appropriate layouts for a better and more organized presentation. Pagination is an essential requirement for blogs, websites that wish their front-pages to be sufficiently little to stack but then sufficiently showcase the most important posts. In this case, Laravel pagination or Vue pagination is a perfect choice for developers.

Components are one of the most powerful features of Vue. They help you extend basic HTML elements to encapsulate reusable code. At a high level, components are custom elements that Vue’s compiler attaches behavior to.

In this blog, I am going to describe how we can make pagination components using Laravel and Vue.js. Let’s get started.

At first, download the Fresh Laravel app, Create a database in MySQL and edit the database credentials in the .env file and go up to your project directory using the command line, run the migration files using the command  php artisan migrate.

Now, a database is created and a users table is also created, Let’s run the command  php artisan tinker and  App Models User :: factory (10) -> create ();  this will generate 100 random records for the user’s table, Now we are going to paginate these 100 records of the user’s table.

Now, Create a route inside  routes / api.php

use AppHttpControllersAPIUserController;

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

In the Above routes, the first one is useful to return the user’s records in JSON format.

Let’s create one UserController  inside the Controllers / API directory and add an index method to return user’s paginated records.

<?php

namespace AppHttpControllersAPI;

use AppHttpControllersController;
use IlluminateHttpRequest;
use AppModelsUser;

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

To see the paginated records, just hit the URL http://<url>/api/users?page=1then you can see something like this JSON formatted data.

Also see:  How to Use Bootstrap in Your Vue.js Apps

Now we have to setup npm for our vue js. For more about npm  visit  Vue js

Run Following Command

composer require laravel/ui

Now set Vue.js as our Frontend, For this run following command

php artisa ui vue

Now npm install

npm install

Install laravel-vue-pagination

npm install laravel-vue-pagination

//or

yarn add laravel-vue-pagination

Go to your resources / js / app.js  and paste the following code

require('./bootstrap');

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

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

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

resources / js / components / Users.vue

<template>
    <div >
        <div >
            <div >
                <div >
                    <div >
                        <h3>Simple Vue.js Pagination Example with Laravel - <a href="https://onlinecode.org/?ref=scode" target="_blank">onlinecode</a></h3>
                    </div>
                    <div >
                        <div >
                            <table >
                                <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 last step, we will update our welcome.blade.php file. in this file, we will use the app.js file and use it, so let’s update.

resources / views / welcome.blade.php

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Simple Vue.js Pagination Example with Laravel - onlinecode</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 you have to run the below command to update the app.js file:

npm run dev

It’d be a good idea to follow along with the simple demo app that can be found in  this GitHub repo .

Also see:  Laravel Livewire Crud Tutorial

If you have any queries or doubts about this topic please feel free to  contact us . We will try to reach you.