Displaying Data from DB to Vue using Inertiajs (Laravel & Vue) as Fast as I Could

This is gonna be the test for me as a fullstack developer.

“can you make me a full application, from frontend to backend. Oh and do it in 1 hour”

Okay, let’s say all i know at the current moment is just Laravel and Vue, i can easily say,

“oh please i hope i still remember creating full monolith with the help of Inertiajs”

So let’s just start.

I assume you’ve created a laravel and vue stack in one place. Usually i would just install jetstream as it will also install vue, Inertiajs, Tailwind, user auth, all in one place. Truly a convenient method.

Here is the command if you forgot

composer create laravel/laravel todo-app
cd todo-app
composer require laravel/jetstream

php artisan jetstream:install

So now after you ran the command you’ve successfully installed your application consists of vue and laravel. Now we can start working.

1. Database Connection Setup

This one easy, just config .env the same as your database setup.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=jetstream
DB_USERNAME=root
DB_PASSWORD=xxxx

2. Table Migration

Next, create a table migration for our project, i will create a ‘contract’ table

php artisan make:migration create_contract_table

Now go to the database/migration/ and find the newly created migration file

<?php

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

return new class extends Migration
{
    /**
     * Run the migrations.
     */
    public function up(): void
    {
        Schema::create('contract', function (Blueprint $table) {
            $table->id();
            $table->string('name');
            $table->string('model');
            $table->integer('price');
            $table->timestamps();
        });
    }

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

This and then just run the migrate command

php artisan migrate

It should create a new table exactly the same as we wanted.

3. Model Creation

Now, we need to make model for easier work when we want to call our data in database from controller.

php artisan make:model Contract

I’ve set the name to Contract to corresponds with the table we’ve just made.

Command above will make new model file in app/Models/

Go there and open the file

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Contract extends Model
{
    use HasFactory;
}

Now, this is the default code, however, if we want to “connect” our model with the database, it would be safer to add this

protected $table = 'contract';

So it will look like this

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Contract extends Model
{
    protected $table = 'contract';
    use HasFactory;
}

4. Routing Setup

This is simple, just add new line to the routes/web.php for creating new route for our display view.

Route::get('/contract', [ContractController::class, 'index']);

We’ve specified ContractController but we haven’t created this yet, even more so the index function inside the class but don’t worry! Just write it first!

5. Controller Creation

Now, we go to our controller to start

Type this command

php artisan make:controller ContractController --resource

It will create a full CRUD controller, with the specified name class ContractController.

<?php

namespace App\Http\Controllers;

use App\Models\Contract;
use Illuminate\Http\Request;
use Inertia\Inertia;

class ContractController extends Controller
{
    /**
     * Display a listing of the resource.
     */
    public function index()
    {
        //
    }

    /**
     * Show the form for creating a new resource.
     */
    public function create()
    {
        //
    }
}

?>

Now, we can use any function for now, i just want to show how to display data anyways. Here for example.

public function index()
    {
        $get = Contract::all();
        return Inertia::render('View', ['contract' => $get]);
    }

There, done, so all i did was just using Inertia class for returning $get variable in ‘contract’ props, and passing it to ‘View.vue’ frontend.

6. Frontend Creation & Displaying Data From Backend to Frontend

Now we go to frontend, create view.vue in resources/js/Pages

<template>
    <h1>Test {{ contract }}</h1>
</template>

<script>
export default {
    props:[
        'contract'
    ]
}
</script>

Now this is important, remember we’ve set ‘contract’ as the props in controller? Now we write it again in the frontend, and especially in the props section. This is where the magic begins.

I love Inertiajs for the fact that it uses props as the way to sending data from backend to frontend. Usually in vue tutorials, we use props for passing data from main to component. Well, now we can do further than that!

Now this is how the data will be displayed

Okay, it’s not fancy but at least it shows the data successfully transmitted from backend to frontend

So from here we can simply just do whatever we want with our view. Display it in table, lists, or any other way.

For example, like this.

<template>
    <h1>Test {{ contract }}</h1>
    <table>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Model</th>
            <th>Price</th>
        </tr>
        <tr v-for="(data, index) in contract" :key="index">
            <td>{{ data.id }}</td>
            <td>{{ data.name }}</td>
            <td>{{ data.model }}</td>
            <td>{{ data.price }}</td>
        </tr>
    </table>
</template>

It will look like this

More pretty right?

It’s done. Now for the next part, we will talk about posting data from frontend to backend.

1. Displaying Data From Backend to Frontend