SPA Tutorial Progress Update

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 (https://serversideup.net/using-sass-vue-components-laravel-mix/) and Adding a Page Layout (https://serversideup.net/building-page-layout-vue-router/). 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' )
      ->name('logout');

I then implemented the logout method here:

public function getLogout(){
        Auth::logout();
        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!