Laravel API Resource + Vue.js Pagination (Part One)

Laravel provides since version 5.5 own api-transformers to transform your eloquent models into JSON.
This could be very handy in a lot of situations when you build API´s using Laravel.

But how can you consume and paginate the results of your api within your application using Vue.js?
In this tutorial, i will show you how to manage the pagination of your results.

What you will need

I assume that you have Laravel Valet and the Laravel Installer installed on your machine.
I also assume that you know the basics of working with Eloquent-Resources in Laravel.
And i assume that you have a basic knowledge of Bootstrap 4, since we´re using BS4 for this example.

Creating a new Laravel Project

Open up your terminal and type

laravel new pagination-example

This will setup a new laravel 5.6 application on your machine.

Now "cd" into your application by typing

cd pagination-example

Prepare a demo-model

We need demo-data. We need a lot of demo-data.
Laravel will help us, creating this data using the model-factories.

But first we need a model, a migration and an idea of what we want to paginate (Oranges, Apples, Cars, WHATEVER!)..
I´ll choose simple persons for this example, since i created some projects with data like most people have 😆.

Type

php artisan make:model Person -m

This will create a new model within your app/ directory called Person and a new migration file within your database/ directory called something like 2018_05_03_create_persons_table.php.

This is how my Person model looks like:

<?php

use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;

class CreatePeopleTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('people', function (Blueprint $table) {
            $table->increments('id');
            $table->string('name');
            $table->string('email');
            $table->string('city');
            $table->string('country');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('people');
    }
}

Type

php artisan migrate

to migrate your database.

The Eloquent Resource

Now that we have our model and migration in place, we also need a eloquent-resource.
You can easily create one by typing

php artisan make:resource PersonResource

This will create a new file called PersonResource within your app/Http/Resources/ directory.

Now prepare your model to allow mass-assignment with our data:

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Person extends Model
{
    protected $guarded = [];
}

Creating the model-factory

Creating a model-factory is pretty simple.
You basically just need to type

php artisan make:factory PersonFactory --model=Person

into your terminal and thats all. (No.. I´m just kidding 😆)

Edit your Person factory like this:

<?php

use Faker\Generator as Faker;

$factory->define(App\Person::class, function (Faker $faker) {
    return [
        'name' => $faker->name,
        'email' => $faker->safeEmail,
        'city' => $faker->city,
        'country' => $faker->country
    ];
});

Faking the data

We still need data. To create the data, just type

php artisan tinker

into your terminal followed by

$persons = factory('App\Person', 30)->create();

once tinker is loaded.
After you pressed enter you will now see an array of mock-data for our resource.

Giving back JSON (Collection)

Now that we have almost everything in place for our test-application, we still need to provide the data..
Eloquent-Resources are very smart.
You can pass an array or an object to the resource and it will automatically map the data into a json-collection / json-object.

We now need to display the data by modifying our routes/web.php file like this:

<?php

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

Route::get('/', function () {
    $persons = \App\Person::paginate(5);

    return \App\Http\Resources\PersonResource::collection($persons);
});

This will give us a collection of all persons in our database when you open up http://pagination-example.test in your browser.

Giving back JSON (Object)

As i told you before, the resource can also handle simple objects..
To only show one from our collection, modify the routes/web.php file like this:

<?php

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
// Collection
Route::get('/', function () {
    $persons = \App\Person::paginate(5);

    return \App\Http\Resources\PersonResource::collection($persons);
});

// Object
Route::get('{id}', function ($id) {
    $person = \App\Person::find($id);

    return \App\Http\Resources\PersonResource::make($person);
});

This will give us a simple object of the person with the ID of 1 in our database when you open up http://pagination-example.test/1 in your browser.

Conclusion

This was part one of the two-parted series "Laravel API Resource + Vue.js Pagination".
In the next part, i will show you how to manage the vue-part of our example.

You can find the source for this part on GitHub.

Comments

[olivedev]

You can also create pagination in Laravel based website with vue without using JSON. For that, you will have to first create model, controller and view of your app. In this tutorial, you have created model, but not controller and view. Here is an example of Vue Pagination done in Laravel using MVC method.

[KP]

@fwartner thanks! Is there a part 2?

Basically I'm trying to paginate this..any ideas how to do that?

        return new PostResource(
            Post::where([
                ['status', '=', 'published'],
                ['is_removed_by_admin', '=', '0'],
            ])
                ->select('id', 'title')
                ->get()
        );

[Kabir Hossain]

How to add pagination for api with resource ?