Building a Vue SPA with Laravel

Laravel has become the most popular choice for developing PHP projects. One important reason for this popularity is the built in support for Vue.js, a very fast growing JavaScript library for developing impressive front-ends.

Required

• WAMP/XAMPP environment
• Laravel 5.7
• PHP 7.2
• MySQL
• Node.js with NPM
• Composer

Installing Laravel

Laravel utilizes Composer to manage its dependencies. So, before using Laravel, make sure you have Composer installed on your machine.

First install Composer

Run cmd in install composer command

Via Composer Create-Project

Alternatively, you may also install Laravel by issuing the Composer create-project command in your terminal:

composer create-project laravel/laravel project-name

Install Node.js with NPM

The first step is the installation of Node.js with NPM.
For this first install Node.js. Next go to the project’s folder and type the following command in the terminal

1. npm init
2. npm install

This command will install all the JavaScript dependencies for VueJS. In addition, the command will also install laravel-mix, an API for defining webpack.

Run On Local Server

If you have PHP installed locally and you would like to use PHP’s built-in development server to serve your application, you may use the serve Artisan command. This command will start a development server at http://localhost:8000:

php artisan serve

Configure the Database

Now setup the MySQL database and configure it in Laravel.

In the project root, you will find the .env and config/database.php files. Add the database credentials (username, DB name, and password) to setup the database and allow the Laravel Single page app to access it.

Create the Migrations

Laravel project and generate a new migration to create task table

cd /path-to-project/project-name
php artisan make:migration create_tasks_table –create=tasks

Next , open the migration file located in the database/migration folder and replace the up() function with the following code

public function up()

{

Schema::create(‘tasks’, function (Blueprint $table) {

$table->increments(‘id’);

$table->string(‘name’);

$table->unsignedInteger(‘user_id’);

$table->text(‘description’);

$table->timestamps();

});

}

Next , In the app/Providers/AppServiceProvider.php file, the boot method sets a default string length:

use Illuminate\Support\Facades\Schema;

public function boot()

{

Schema::defaultStringLength(191);

}

Run the Migration

Create the tables in the database by using the following command:

Php artisan migrate

Setup User Authentication

Laravel provide default user authentication in which you can register users who can then login through the provided login system. This login system also provides Laravel CRSF authentication token to further strengthen the security of the application against malicious exploits. Use the following command to set up user authentication in the Laravel Vue SPA:

php artisan make:auth
Create Task Model and Task Controller

Create task model because I will handle database operations through Laravel Eloquent. I also need a controller to handle user requests such as create, read, update and delete operations.

Use the following command to create the model and the controller:

php artisan make:model Task
Next open the Task Model which in app/Task.php and controller at

/app/Http/Controllers/TaskController.php. Update the model code with the following code.

Create Controller

Php artisan make:controller name

Next, update the controller file with the following code.


return response()->json([
‘tasks’ => $tasks,
], 200);
}
/**
* Show the form for creating a new resource.
*
* @return \Illuminate\Http\Response
*/
public function create()
{
//
}
/**
* Store a newly created resource in storage.
*
* @param \Illuminate\Http\Request $request
* @return \Illuminate\Http\Response
*/
public function store(Request $request)
{
}
/**
* Display the specified resource.
*
* @param \App\Task $task
* @return \Illuminate\Http\Response
*/
public function show(Task $task)
{
//
}
/**
* Show the form for editing the specified resource.
*
* @param \App\Task $task
* @return \Illuminate\Http\Response
*/
public function edit(Task $task)
{
//
}
/**
* Update the specified resource in storage.
*
* @param \Illuminate\Http\Request $request
* @param \App\Task $task
* @return \Illuminate\Http\Response
*/
public function update(Request $request, Task $task)
{
}
/**
* Remove the specified resource from storage.
*
* @param \App\Task $task
* @return \Illuminate\Http\Response
*/
public function destroy(Task $task)
{
}
}

Middleware

To setup middleware, add the following code to the Task Controller.

public function __construct()
{
$this->middleware(‘auth’);
}


Create the Method

In the store() method of Task Controller, update the following code to add data into database.


$this->validate($request, [
‘name’ => ‘required’,
‘description’ => ‘required’,
]);
$task = Task::create([
‘name’ => request(‘name’),
‘description’ => request(‘description’),
‘user_id’ => Auth::user()->id
]);
return response()->json([
‘task’ => $task,
‘message’ => ‘Success’
], 200);

Update Method

In Update() method of Task Controller, update the following code to edit database data. database.


$this->validate($request, [
‘name’ => ‘required|max:255’,
‘description’ => ‘required’,
]);
$task->name = request(‘name’);
$task->description = request(‘description’);
$task->save();
return response()->json([
‘message’ => ‘Task updated successfully!’
], 200);


Delete Method

In the Destroy() method of Task Controller, the following code will delete data from the database.


$task->delete();
return response()->json([
‘message’ => ‘Task deleted successfully!’
], 200);


Route Set up in Laravel

Route sets the application URL and the controller method for the URL. Routes are located in route/web.php and contains the following code


Route::get(‘/home’, ‘HomeController@index’)->name(‘home’);
Route::resource(‘/task’, ‘TaskController’);


Create Vue.js Components

Create a new file for Task component inside /resources/assets/js/components/ folder named Task.vue and add following sample code


Task.vue:

The component is ready for registration. Open app.js file from

/resources/assets/js/app.js and add the following line after example component registration line

app.js:

Vue.component(‘task’, require(‘./components/Task.vue’));

Compile Assets

Use the following command to compile the newly added code as a Vue.js component. This will also register component:

npm run dev
Calling in the View

Now open home.blade.php located in /resources/views/ and update it as follows:


@extends(‘layouts.app’)
@section(‘content’)

@endsection

Create Update & Delete in Task.vue

The Task component is located inside /resources/assets/js/components/ and is named Task.vue. Open this file and update the code

Now run the following command to compile the newly added code as a Vue.js component

npm run dev