Laravel Vue JS Pagination

Today, I might want to impart to you how to make laravel vue pagination without any preparation. We will make dynamic pagination with vue.js. We will utilize laravel-vue-pagination npm bundle for vue pagination in laravel 5, laravel 6, laravel 7, laravel 8 and laravel 9 application.

As we probably are aware in todays, laravel become more famous and as well as vue js as well. Practically prefer to foster their site or undertaking in Laravel with vue js. We as a whole love vue js since it's truly smooth and ideal to work with it. Thus, here, we will perceive how to make pagination utilizing vue and laravel.

In this model, I just download laravel 9.0 new task and afterward make "classes" table with model. Then I introduced vue and npm introduce, then, at that point, I additionally introduced vue-asset since we want to utilize http demand. Then, at that point, I introduced laravel-vue-pagination bundle, after that we can run over application.

You need to simply follow bit by bit this instructional exercise and you will get extremely decent model and without any problem. You can likewise download and see demo as cry connect. You will have design like as roar review: 

Step 1 : Install Laravel 5.6 App

we are going to from scratch so, we need to get fresh Laravel 5.6 application using bellow command, So open your terminal OR command prompt and run bellow command:

composer create-project --prefer-dist laravel/laravel blog

Step 2: Create Category Table and Model

next step, we need to create migration for "categories" table using Laravel 5.6 php artisan command, so first fire bellow command:

php artisan make:migration create_categories_table

After this command you will find one file in following path database/migrations and you have to put bellow code in your migration file for create categories table.

<?php

use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;

class CreateCategoriesTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('categories', function (Blueprint $table) {
            $table->increments('id');
            $table->string('name');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('categories');
    }
}

After create migration we need to run above migration by following command:

php artisan migrate

After create "categories" table you should create Category model for categories, so first create file in this path app/Category.php and put bellow content in Category.php file:

app/Category.php

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Category extends Model
{
    /**
     * The attributes that are mass assignable.
     *
     * @var array
     */
    protected $fillable = [
        'name'
    ];
}

After create migration and model, Make sure you have to add some dummy records in your "categories" table.

Read Also: Laravel 5 and Vue JS CRUD with Pagination example and demo from scratch

Step 3: Create Route

In this step, we will create one route for getting data. So, let's add new route on that file.

routes/web.php

Route::get('categories', 'CategoryController@index');

Step 4: Create Controller

in this step, now we have create CategoryController with index methods, in this method we will return pagination data. So let's create controller:

app/Http/Controllers/CategoryController.php

<?php
 
namespace App\Http\Controllers;
 
use Illuminate\Http\Request;
use App\Category;
 
class CategoryController extends Controller
{
    /**
     * success response method.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
    	$data = Category::paginate(10);
    	return response()->json($data);
    }
}

Step 5: NPM Configuration

In this step, we have to first add setup of vue js and then install npm, after that we will install vue-resource and laravel-vue-pagination, so let's run bellow command in your project.

Install vue:

php artisan preset vue

Install npm:

npm install

Install vue-resource:

npm install vue-resource

Install laravel-vue-pagination:

npm install laravel-vue-pagination

Step 6: Work on app.js and Components

Here, we will write code on app.js and then we will create vue js components, So let's create both file and put bellow code:

resources/assets/js/app.js

 
require('./bootstrap');
 
window.Vue = require('vue');
Vue.use(require('vue-resource'));
 
Vue.component('data-component', require('./components/DataComponent.vue'));
Vue.component('pagination', require('laravel-vue-pagination'));
 
const app = new Vue({
    el: '#app'
});
 

resources/assets/js/components/DataComponent.vue

<template>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">Laravel vue pagination - ItSolutionStuff.com</div>
 
                    <div class="card-body">
                        <ul>
                            <li v-for="tag in laravelData.data" :key="tag.id">{{ tag.name }}</li>
                        </ul>
                        <pagination :data="laravelData" @pagination-change-page="getResults"></pagination>
 
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
 
<script>
    export default {
        mounted() {
            console.log('Component mounted.')
        },
        data() {
            return {
                laravelData: {},
            }
        },
        created() {
            this.getResults();
        },
        methods: {
            getResults(page) {
                if (typeof page === 'undefined') {
                    page = 1;
                }
      
                this.$http.get('/categories?page=' + page)
                    .then(response => {
                        return response.json();
                    }).then(data => {
                        this.laravelData = data;
                    });
            }
        }
    }
</script>

Step 7: Update welcome.blade.php

At last step, we will update our welcome.blade.php file. in this file we will use app.js file and use it, so let's update.

resources/views/welcome.blade.php

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="csrf-token" content="{{ csrf_token() }}">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Laravel 5.6 Vue JS Pagination</title>
        <link href="{{asset('css/app.css')}}" rel="stylesheet" type="text/css">
    </head>
    <body>
        <div id="app">
            <data-component></data-component>
        </div>
        <script src="{{asset('js/app.js')}}" ></script>
    </body>
</html>

Now you have to run below command for update app.js file: