Surfe.be - passive income

Laravel Pagination Example using Vue js from Scratch

Pagination in Laravel using Vue Js

Today, I am going to share with you how to make easy Vue js pagination in Laravel 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. 

laravel-vue-js-pagination

Pagination Using Vue js

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

Step 1 : Installation Laravel 5.6 

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 : Laravel Pagination Using jQuery &  Ajax 

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 5 : Working on app.js and Components

Go to your  resources/assets/js/app.js  and paste this following code

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'
});

Then you have to go 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">pagination - www.techmahedy.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 6: Finally update your blade file

<!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>Pagination - www.laramust.com</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:

npm run dev

Thats it . Hope it will help you. If you like this tutorial then please share with your friends and leave a comments.  

Leave a comments

LET'S SOCIALITE

Recent Tweets