how to create Pagination in Vue laravel table

Amendments and additions

In case you haven't implemented a REST endpoint I suggest doing it with Transformers. After that you may follow the next use case:

app/Transformer/BookingsTransformer.php

public function transform($booking) {
    return [
        'booking-id' => $booking->booking_id,
        'booking-data' => $booking->booking_date,
        'booking-status' => $booking->booking_status,
        'checkin' =>    $booking->booking_checkin,
        'checkout' =>   $booking->booking_checkout,
    ];
}

app/Http/Controllers/BookingsResourceController.php

use EllipseSynergie\ApiResponse\Contracts\Response;
use App\Models\Bookings;
use App\Transformer\BookingsTransformer;

class ImageController extends Controller
{
  protected $response;

  public function __construct(Response $response)
  {
    $this->response = $response;
  }

  public function index()
  {
    //Get dataset's items
    $image = Bookings::paginate(10);
    // Return a collection of $images
    return $this->response->withPaginator($image, new  BookingsTransformer());
}

app/Http/Controllers/BookingsController.php

use App\Models\Bookings;
use Illuminate\Http\Request;

class BookingsController extends Controller
{ 
  public function index()
  {
    return view('reservations');
  }

routes/api.php

Route::get('bookings-api','ImageController@index');

routes/web.php

Route::get('/Bookings','BookingsController@index','as' => 'reservations');

resources/views/reservations.blade.php

<div class="container" id='app'>    
  <reservation-list></reservation-list>
</div>    

Meanwhile you have to install npm and a pagination package in your Laravel project:

npm install npm install vuejs-paginate --save npm run watch

resources/assets/js/app.js

require('./bootstrap');

window.Vue = require('vue');

Vue.component(
   'image-list',
   require('./components/Bookings.vue')
);

Vue.component('paginate', require('vuejs-paginate'));

const app = new Vue({
    el: '#app'
})

resources/assets/js/Components/Bookings.vue

 <template>
  <tbody>
   <tr v-for="booking in bookings">
    <td>{{ booking.booking_number | formatBookingNumber }}</td>
    <td>{{ booking.date }}</td>
    <td>{{ booking.status }}</td>
    <td>{{ booking.check_in_date }}</td>
    <td>{{ booking.check_out_date }}</td>
   </tr>
  </tbody>

  <div class="centered">
    <paginate
    :page-count="pageCount"
    :margin-pages="2"
    :page-range="4"
    :initial-page="0"
    :container-class="'pagination'"
    :click-handler="fetch"
    :prev-text="'Prev'"
    :next-text="'Next'"
    ></paginate>
  </div>

</template>

<script>
  export default {

     data() {
       return {
         bookings: [],
         endpoint: 'api/bookings-api'
       };
     },

    created() {
      this.fetch();
    },

    methods: {
       fetch(page = 1) {
         axios.get(this.endpoint + page)
         .then(({data}) => {
             this.dataset = data.data;
             this.pageCount = data.meta.pagination.total_pages;
          });
       },
    }
  }
</script>

Hope it helped

you can try Vue Datatable package for this: In your vue laravel application, you need to run below command just:

npm install --save vue-good-table

For more check this link:

Vue Laravel Tutorial Part 7 – Datatables

I am going to show you how to do it in simple way.Of course you need to change or add code to make this works in your app.Just try to understand the logic.

Vue.js component:

<template>
   .....//here supposed to have more code
  <tbody>
  <tr v-for="booking in bookings">
    <td>{{ booking.booking_number | formatBookingNumber }}</td>
    <td>{{ booking.date }}</td>
    <td>{{ booking.status }}</td>
    <td>{{ booking.check_in_date }}</td>
    <td>{{ booking.check_out_date }}</td>
    <td>
    </td>
  </tr>
  </tbody>
  ... 
</template>
<script>
  import axios from 'axios'

  export default {
    data() {
      return {
        bookings: [],
        page: 1, //change the page regarding your next and previous pagination button
        rowsPerPage: 15,
        totalItems: 0
         ..... 
      }
    },
    created () {
      axios.get('/bookings', {
        params: {
          page: this.page,
          rowsPerPage: this.rowsPerPage
        }
      })
        .then(response => {
          this.bookings = response.data.bookings
          this.totalItems = response.data.totalItems
        })
    }
  }
</script>

In Laravel routes/api.php

Route::get('/bookings','ControllerName@controllerFunctionName');

Then in your function,in your Controller do the following:

$page = $request->get('page');
$rowsPerPage = $request->get('rowsPerPage');
$skip = ($page - 1) * $rowsPerPage;

$bookings = YouBookingsModel::select(here put your query)->skip($skip)->take($rowsPerPage)->get();

$bookingsCount = YouBookingsModel::all()->count();

return response()->json([
 "bookings" => $bookings,
 "totalItems" => $bookingsCount
], 200);

Note that you have to made it in your own. But also consider using a material frameworks. I am using Vuetify which is awesome!!And there go to dataTables and you can use your table with pagination in easy and vuetiful way