Laravel Rest API Pagination with Vue.js

Pagination when it comes to rest API can give you a bit of a headache, lucky for us, Laravel comes with it’s own solution for the backend as well as Vue.js

1)In order to get Laravel to make your Rest API results Pagination friendly, you must add this method to your controllers:

->paginate(10); <---It will output 10 results per page

Here is a full example:

public function getReports(Request $request){

$results = Marker::where([['isaccepted','=','3'],['user_id','=',$request->user()->id]])->orderBy('id', 'desc')->paginate(10);
return response()->json(['data' => $results], 200);

}

2)Your data object will now have extra options as:

{
"meta":{"current_page":1,
"from":1,
"last_page":1,
"path":"https:\/\/yoursite.com\/api\/v1\/getreports",
"per_page":5,
"to":2,
"total":2}
}

3)Your Laravel api route has to be setup this way:

Route::group(['prefix' => 'v1'], function() {
Route::get('getreports', 'Api\ReportsController@getReports');
});

You will now be able to access the route via:

https://yoursite.com/api/v1/getreports

All you have to do now is receive the data with the extra meta options and use this vue plugin to play with your paginated data(unless you prefer to code your own solution)

https://github.com/gilbitron/laravel-vue-pagination

If this short tutorial helped you, please leave me a message