SPA Tutorial Update 2

Part 20 of 48 in API Driven Development With Laravel and VueJS
Dan Pastori avatar
Dan Pastori November 13th, 2017
⚡️ Updated content is available We learned a lot since we originally wrote this article. We now have this updated for Laravel 8, Vue/NuxtJS, and Capacitor.

So this just a quick update with a few minor changes to the app, nothing huge. Just updated some pages and Vue Components.

Fixed Footer to Bottom of Page

First, I fixed the footer to bottom of page. This will help with the usability of the app and make for a much cleaner flow. What I did, is calculated the min-height of the page class to be the height of the page, subtracting the height of the footer and height of the header. This will push the footer all the way to the bottom of the page if the content doesn’t take up the whole page.

In the /resources/assets/sass/layouts/_page.scss I added this style:

min-height: calc(100vh - 130px);

What this does is ensure the body content height is at least the full height of the page minus the height of the footer and header.

Added Cafe Card

To make for the display of Cafes a little more beautiful, I created a card for each one. The card is a nice display that displays the name of the cafe and it’s address. We will be displaying a lot of data in these cards over the next few tutorials.

You can find the CafeCard.vue here: /resources/assets/js/components/cafes/CafeCard.vue.

I imported the card into the home page and where I iterated over the cafe list, I add a card now. The code looks like:

<div class="grid-container">
  <div class="grid-x grid-padding-x">
    <loader v-show="cafesLoadStatus == 1" :width="100" :height="100"></loader>
    <cafe-card v-for="cafe in cafes" :key="cafe.id" :cafe="cafe"></cafe-card>
  </div>
</div>

One thing to note, is that we set the :key attribute for the cafe to the id of the cafe. When using custom components in VueJS and iterating over them, you have to apply a key parameter. This is new in VueJS 2.

In the CafeCard itself, I wrapped the markup with a <router-link></router-link> that looks like:

<router-link :to="{ name: 'cafe', params: { id: cafe.id} }">

What this does is link the cafe card to the actual page for the cafe.

Added Loaders

To show the loading process I created a Loader.vue component. You can see that I used them on the home page when loading the cafes in the last section. I did this as a component so you can pass width and height parameters which allow the component to fit in a variety of places.

You can find the loader here: /resources/assets/js/components/global/Loader.vue

There’s a great source for loading icons that I used here: SVG Loading icons.

On the homepage this is a nice visual display to show the status of the application.

Tuned Up Cafes.vue

I made the CafesMap.vue map full screen positioning it absolute:

<style lang="scss">
  div#cafe-map{
    position: absolute;
    top: 50px;
    left: 0px;
    right: 0px;
    bottom: 100px;
  }
</style>

I also gave the map the full width on the Cafes.vue page so the template right now looks like:

<div id="cafes" class="page">
  <cafe-map></cafe-map>
</div>

These simple enhancements will add some benefit later down the road where we can do some overlays on the map.

Conclusion

These simple updates will now make the app a lot more user friendly and leave a blank slate for the next few features we will add. The next tutorials will dive more into some Laraval relationship techniques as we add brew methods to the cafes and child cafes (cafes with more than one location).

Feel free to check out all of the updates here: GitHub – serversideup/roastandbrew.

Keep Reading
View the course View the Course API Driven Development With Laravel and VueJS
Up Next → Many To Many Relationships 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 you can buy us a beer.

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.

What topics are you interested in?
Are you interested in our upcoming book?