SPA Tutorial Update 4

Part 33 of 48 in API Driven Development With Laravel and VueJS
Dan Pastori avatar
Dan Pastori December 21st, 2017
⚡️ Updated content is available We learned a lot since we originally wrote this article. We now have this updated for Laravel 10, Vue 3/NuxtJS 3, and Capacitor 3.

So we are ready for another update! Lots of new features have been added and we are moving forward towards a much more powerful system and some more awesome tutorials! In these updates I include smaller features that I added to make the application more functional and user friendly, but not large enough to require a specific tutorial.

Here’s a few updates:

Added Editing Cafes

This was probably the biggest feature that was added, however there aren’t many differences between the functionality to add a cafe and to edit a cafe.

The big thing to note is that we use the PUT HTTP verb to edit a cafe. This is RESTFul for a proper update of a resource. When we submit this request, we should expect a 200 response or a 204 response code. We are using 200 since we return the edited cafe and any new locations back after the response is submitted.

The main changes included, adding a route to submit an edit to and a route to load a cafe with respect for the user’s data (individual tags added by the user) so they can edit the cafe and only the tags they added to the cafe.

The other unique situation is when editing a cafe and adding a location, we want to grab the right parent ID for the cafe. The new location will either have the parent of the cafe we edited or the cafe we edited will be the parent.

We also added a link to the Cafe.vue page to edit the cafe.

All code can be viewed here: GitHub – serversideup/roastandbrew: Helping the coffee enthusiast find their next cup of coffee. Also, helping aspiring web and mobile app developers build a single page app and converting it to a mobile hybrid. All tutorials can be found at

Fixed Error on Adding Cafe

When we add a cafe, we either get a successful notification or an un-successful notification. Before we had a successful notification appear when we had an unsuccessful response. This has been fixed in the NewCafe.vue page:

if( this.addCafeStatus == 3 ){

Updated For Namespaced User Class

There were a few places where we need to update for the User class for it’s namespace in the /app/Models/ directory. First was in the /app/config/auth.php file:

'providers' => [
        'users' => [
            'driver' => 'eloquent',
            'model' => App\Models\User::class,

Next we had to actually add the namespace on top of the User.php file:


namespace App\Models;

Then we had to add the use statement in the app/Http/Controllers/Web/AuthenticationController.php file:

use App\Models\User;

Fixed Delete Tag

In the /api/v1/cafes/{id}/tags/{tagID} route, I was using dashes instead of quotes causing MySQL to error out. I had to update to quotes and it worked seamlessly:

DB::statement('DELETE FROM cafes_users_tags WHERE cafe_id = "'.$cafeID.'" AND tag_id = "'.$tagID.'" AND user_id = "'.Auth::user()->id.'"');

Where We Are Going

The next tutorial is going to be huge. We will be opening up the cafe data to be public. This way users can find cafes without having an account, but make an account to add cafes and add edits. There will be a few things we will re-structure for this to happen. From there, we can make all sorts of cool updates and people can use the app more than before!

Of course, all code updates will be pushed here:

If you are interested in learning more about API driven development, we are writing a book! It will contain a more in-depth approach with more description and theory on how to develop an API driven application. Sign up here for more information and be the first to know when it’s released: Server Side Up General List

Keep Reading
View the course View the Course API Driven Development With Laravel and VueJS
Up Next → Public and Private API with Laravel

Support future content

The Ultimate Guide to Building APIs and Single-Page Applications with Laravel + VueJS + Capacitor book cover.

Psst... any earnings that we make off of our book is being reinvested to bringing you more content. If you like what you read, consider getting our book or get sweet perks by becoming a sponsor.

Written By Dan

Dan Pastori avatar Dan Pastori

Builder, creator, and maker. Dan Pastori is a Laravel certified developer with over 10 years experience in full stack development. When you aren't finding Dan exploring new techniques in programming, catch him at the beach or hiking in the National Parks.

Like this? Subscribe

We're privacy advocates. We will never spam you and we only want to send you emails that you actually want to receive. One-click unsubscribes are instantly honored.