Laravel, Vue
SPA Tutorial Update 2
Part 20 of 48 in API Driven Development With Laravel and VueJS
Dan Pastori
SPA Tutorial Update 2 Part 20 of 48 in API Driven Development With Laravel and VueJS

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.

About the Author
Builder, creator, and maker. Dan Pastori has over 10 years experience as a full stack developer. When you aren't finding Dan working on building a farm using Arduinos, catch him at the beach or hiking in the National Parks. Follow me on Twitter
More posts in this course
API Driven Development With Laravel and VueJS See The Entire Course
Keep ads off of this site!
We respect your privacy, and we mean it! If you enjoy our content, help us create more freely available content by making a contribution.
×

Want to know our top 5 tools for API Development?

Sign up now and we will send you our free e-book! You will also be the first to know when our API Driven Development course is launched!