Laravel 8 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) {
            $table->increments('id');
            $table->string('name');
            $table->timestamps();
        });
    }
 
}

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:

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

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

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

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

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

npm run dev

I hope it can help you.