SPA Tutorial Progress Update

Part 13 of 48 in API Driven Development With Laravel and VueJS
Dan Pastori avatar
Dan Pastori October 23rd, 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.

This is just a simple update on where we are on the app. We’ve got a single page app ready to rock and roll and now we need to make it look good and actually add some functionality. The last two tutorials were kind of small with Adding SASS to a Vue Component ( and Adding a Page Layout ( The next bunch of tutorials will focus on cool features that will be added to our app and make it more functional. These features can be added in a single page app or follow along in the tutorial to add them in any application that uses Vue or Laravel.

User Updates

In the repo and some of the other tutorials, you will see references to loading our logged in user. This is very similar to everything I laid out for our cafes routes both on the Laravel and JS/Vue side of things. If you follow along in the tutorials, I followed the same functionality and code structure as the Cafes. You can find the code in the repository and check it out as well.

One thing I’d like to point out app/Models/User.php file is I added two database fields to the $hidden array on the User model. These are the provider and provider_id columns. We do NOT want this data returned when we return our User object as JSON to our routes. This is essentially password level information. The $hidden array should look like:

     * The attributes that should be hidden for arrays.
     * @var array
    protected $hidden = [
        'password', 'remember_token', 'provider', 'provider_id'

Login/Logout Updates

I added a few styles to the layout: login.blade.php. Nothing really important, just makes it look better. I did add a route to our routes/web.php file for logging out:

Route::get( '/logout', 'Web\AppController@getLogout' )

I then implemented the logout method here:

public function getLogout(){
        return redirect('/login');

Revisiting Navigation.vue Component

If you looked at the Navigation.vue component, there were a few things I wanted to point out.

First would be the <router-link> component in the links section. This is provided by Vue Router to link to another page in the Single Page App. For more information, you can view the docs here: router-link · vue-router. It’s pretty straight forward, you add parameters if needed and you can link via name or path that we defined in the routes.js file. In the Navigation.vue component, I link via the name of the route.

Second, would be this line of code for the user’s avatar:

<img class="avatar" :src="user.avatar" v-show="userLoadStatus == 2"/>

You can see that we added the : before the src parameter. This is Vue’s way of saying we will bind a local data or computed property to this parameter. In this case computed from Vuex for the user. It will then add the user’s avatar once it’s loaded. We also added the v-show with the userLoadStatus == 2. This means we won’t show the avatar until the user has finished loading. Kinda slick!

Coming Up

The next tutorials, we will be adding functionality to our app including submitting new cafes, adding some mapping functionality, maybe saving visited cafes. These will all be able to be used in any VueJS/Laravel application. Once we have some cool features, we will use our Web Components and build a Cordova mobile app. You will be shocked at how transferrable these components are!

Keep Reading
View the course View the Course API Driven Development With Laravel and VueJS
Up Next → API Driven Form Submissions with Javascript, Vuex and 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.