Laravel Pagination Example Using Vue Js From Scratch

Hello devs,

In this laravel 7 vue pagination example, I will show you step by step how to create laravel 7 pagination with vue js. There is a package laravel-vue-pagination and using this laravel-vue-pagination package, we will create pagination with laravel in vue js.

If you don't know how to create laravel vue pagination, then this example is for you. I will show you step by step so that you can understand better laravel vue pagination example. So let's see the example code of laravel vue pagination example.

Step 1 : Installation Laravel

For doing it we have to follow some instructions. So follow one after another

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

Step 2: Migration Table

Now run the below command to create a category model.

php artisan make:model category -m // here -m for migration

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

class CreateCategoriesTable extends Migration
{
    public function up()
    {
        Schema::create('categories', function (Blueprint $table) {
            $table->increments('id');
            $table->string('name');
            $table->timestamps();
        });
    }
 
}

and then connect your database and run the following command.

php artisan migrate

Step 3: Create New Route

In this step, we need to create routes for categories. So open your routes/web.php file and add the following code.

routes/web.php

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

Step 4 : Create Controller

In this step, here in CategoryController inside index methods, we are going to create this method which will return pagination data. So let’s create a controller:

app/Http/Controllers/CategoryController.php

namespace App\Http\Controllers;
 
use Illuminate\Http\Request;
use App\Category;
 
class CategoryController extends Controller
{
 
    public function index()
    {
        $data = Category::paginate(10);
        return response()->json($data);
    }
}

Read Also How to upload image in Laravel

Step 5: Installation vue js :

Now we have to set up npm for our vue js. Run the following command

php artisan preset vue

Now install npm

npm install

Now install vue resource

installation vue-resource

Install laravel vue pagination package by the following command:

npm install laravel-vue-pagination

Step 6 : Working on app.js and Components

Go to your resources/assets/js/app.js and paste the following 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

Step 7: Update welcome.blade.php

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

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

npm run dev

I hope it can help you.