Build a Task List with Laravel 5.4 and Vue 2 Published July 17th, 2017

Get started with Laravel PHP framework and the Vue Javascript framework

Build a Task List with Laravel 5.4 and Vue 2 image

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:

$ ./ 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:



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) {

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


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.


    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);
            return 204;

Related articles