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) {


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.


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:


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


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




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.



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

npm run dev


I hope it can help you.


#laravel #vue-js