Laravel 8.x Pagination Example Using Vue Js

Pagination in Laravel using Vue Js is the today's topic. Today, I am going to share with you how to make easy Vue js pagination in Laravel 8 application. As you know Pagination help us to load few records every time, that way can not broken web page due to lots of data.

If you are making pagination and do it using Vue js then it more beautiful. Vue js Pagination load only your table data instead of whole page. So Vue pagination is very helpful. In this post i am going to make it. So let's learn how to make it.

if you don't know how to create laravel vue pagination then you are a right place. I will show you step by step to create laravel 8 vue pagination example. To complete this tutorial, you can add this pagination in your every project.

So let's start our today's tutorial laravel vuejs pagination example. Here i will use fresh laravel app. So you can use fresh laravel app.



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

Step 1 : Installation Laravel

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


Step 2: Migration Table

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


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 todos table.

class CreateCategoriesTable extends Migration
    public function up()
        Schema::create('categories', function (Blueprint $table) {


and then connect your database and run following command.

php artisan migrate


Step 3: Create New Route


In this is step we need to create routes for todos . So open your routes/web.php file and add 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 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


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

Step 5: Installation vue js :

Run following command

php artisan preset vue


Now install npm

npm install


Now install vue resource

installation vue-resource


Install laravel vue pagination

npm install laravel-vue-pagination


Step 6 : Working on app.js and Components

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

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.



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

npm run dev


I hope it can help you.