Build a Task List with Laravel 5.4 and Vue 2

Jul 17, 2017

Get started with Laravel PHP framework and the Vue Javascript framework


We’re going to follow along with @felicianopj post that is available here. The source code for this tutorial is on github.

Create application

I have a short shell script in my Projects folder that I run to create fresh Laravel apps (link to gist) ⭐

So run the script like:

$ ./create_laravel_app.sh laravel-vue-tasks
$ cd laravel-vue-tasks

Database stuff 📊

We have a Laravel app and we need to store our tasks in the database.

This one artisan command creates the model, a migration file and a resource controller.

$ php artisan make:model Task -mr

In the model file we need to tell Laravel that the attributes of the database are “mass assignable”. To do this and turn off some of Laravel’s security by default functionality we set $guarded to an empty array like so:

app/Task.php

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

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

Also, create a MySQL database on your local machine. In the following commands we’re going to login to MySQL and run a SQL command that creates a database.

$ mysql -uroot -p
MySQL [(none)]> create database laravue;

Query OK, 1 row affected (0.04 sec)

MySQL [(none)]> Ctrl-C -- exit!

Our data structure is going to be mad simple. Tasks will have a body of text, that’s it. We define this structure in database/_create_tasks_table.php.

Schema::create('tasks', function (Blueprint $table) {
    $table->increments('id');
    $table->longtext('body');
    $table->timestamps();
});

In your .env file specify that we want to connect to the database we created.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravue
DB_USERNAME=YOUR_USERNAME_HERE
DB_PASSWORD=YOUR_PASSWORD_HERE

Migrate the database:

$ php artisan migrate

If you have issues try clearing the cache using php artisan config:clear before the migration command.

Create the API 📡

First we’ll set up routes. Head into routes/web.php and we’ll create a route group that will have all our CRUD actions for tasks. Add this line:

Route::get('/', function () {
    return view('welcome');
});

Route::prefix('api')->group(function() {
    Route::resource('tasks', 'TaskController');
});

To check out the routes available to your application in Laravel you can always run: php artisan route:list

Head to app/Http/Controllers/TaskController.php and define our routes. It’s worth noting that we are using route model binding so a lot of the heavy lifting is defined for us. In this instance Laravel takes advantage of convention over configuration.

<?php

namespace App\Http\Controllers;

use App\Task;
use Illuminate\Http\Request;

class TaskController extends Controller
{
    public function index()
    {
        return Task::latest()->get();
    }

    public function store(Request $request)
    {
        $this->validate($request, [
            'body' => 'required|max:500'
        ]);

        return Task::create([ 'body' => request('body') ]);
    }

    public function destroy($id)
    {
        $task = Task::findOrFail($id);
        $task->delete();
        return 204;
    }
}

Let Bay Area companies find you

Join candidate network