Consolidating the final components

Wow, we've come so far and have a complete and working Vue app! Well done for getting this far. The last step is a nice one and it's about consolidating our remaining code into components to really tidy up our HTML source.

Learning Objectives

• Create the last components we'll need

Turn the Navbar into a component

In your index.html, you will see the Navbar code. It's a large block and everything is self-contained, so it makes sense to turn this into a component.

Step 1

Cut the Navbar code out of index.html and add it to a new component in main.js:

const Navbar = Vue.component('Navbar', {
  template: `
    <div class="navbar">
      <div class="navbar__inner">
        <div class="container">
          <div class="navbar__heading">
            <router-link to="/">
              Plants Direct
              <span class="heading__sub">"Our plants, your passion"</span>
            </router-link>
          </div>
          <ul class="navbar__navigation">
            <li><router-link to="/">Home</router-link></li>
            <li><router-link to="/about">About</router-link></li>
            <li><router-link to="/contact">Contact</router-link></li>
          </ul>
          <div class="cart">Cart ({{$store.getters.getCartLength}})</div>
        </div>
      </div>
    </div>
  `,
});

Step 2

In your app component, add a template and chop out main, router-view, etc, from your source and add it here. Don't forget to add a container div to surround everything else you'll get errors and the content won't show.

// app component

template: `
  <div> // container div
    <Navbar />
    <main>
      <div class="container">
        <router-view />
      </div>
    </main>
    <footer>
      <div class="container">
        <p>&copy; {{ footerCopyrightNotice }}</p>
        <p>{{ footerAddress }}</p>
      </div>
    </footer>
  </div>
`,

Your #app div on your index.html page will now be empty ready for Vue to mount the template:

<div id="app"></div>

And that's it!

Assignment - Coding challenge

Let's make our app fully component driven!

Part 1

Your challenge is to turn the footer into a component just as we did with the Navbar. Don't forget to copy the computed methods over to your new Footer component!

Part 2

Navigate the whole site and ensure everything is working before committing your work to Git.