• 15 hours
  • Medium

Free online content available in this course.

course.header.alt.is_video

course.header.alt.is_certifying

Got it!

Last updated on 4/13/21

Manage Complexity With Single-File Components

Log in or subscribe for free to enjoy all this course has to offer!

The Problem of Complexity

When building a website, repetitive code is something that occurs very frequently and often makes maintenance a bit of a headache. For example, most websites have a navigation menu on every page.

<html>
<body>
<nav>
<a href="/">Home</a>
<a href="/about">About</a>
<a href="/contact">Contact</a>
</nav>
<p>Welcome to our <a href="/">Home<a> page!</p>
</body>
</html>

While this is fairly straightforward to manage on a single page, can you imagine what would happen if someone needed to make a change to the navigation links? If you need to update the CSS class to update styles, that would require at least three lines of code changes for every page that utilizes this navigation. As a result, this creates a lot of opportunities for bugs.

The Solution: Components

To solve this, the front-end community has popularized the concept of components, which allows you to encapsulate a set of HTML elements in a way that's reusable and easily maintainable. Component-based architecture is one of the most critical paradigms in front-end development since it provides the foundation for applications to scale and be maintainable over a long period. While that may be hard to envision, let's dive right into Vue's approach to components to illustrate what's going on. 

Single-file components (SFCs) allow you to create custom HTML elements that encapsulate the behavior in an easily maintainable manner. They are one of the best features of Vue and can be identified by its extension .vue. They are comprised of three primary blocks:

  1. Script - where your JavaScript lives.

  2. Template - where your HTML lives.

  3. Style - where your CSS lives.

Let's start by creating a simple example in our components directory:

// ./components/HomeLink.vue
<script>
export default {
name: 'HomeLink'
}
</script>
<template>
<a href="/">Home</a>
</template>
<style>
a {
text-decoration: none;
}
</style>

While it may seem odd at first, single-file components (SFCs) empower you to encapsulate your logic, content, and styles together in a way that makes it easy to maintain and scale, while still taking advantage of best practices since the build process will separate your code into correct bundles at build time.

Using Single-File Components

In our navigation example, let's refactor it using our new component in Vue.

<script>
import HomeLink from './components/HomeLink.vue'
export default {
name: 'App',
components: {
HomeLink
}
}
</script>
<template>
<div id="app">
<nav>
<HomeLink />
<a href="/about">About</a>
<a href="/contant">Contact</a>
</nav>
<p>Welcome to our <HomeLink /> page!</p>
</div>
</template>

Let's go over what just happened:

  1. I imported the HomeLink component using ES6 import.

  2. I registered our component through the components property, which takes an object as a value with key-value pairs to register components.

    (In the example, I use the ES6 shorthand notation for defining object key-value pairs. By only defining the value as a single variable, JavaScript understands to unpack this as: 'HomeLink': Homelink .)

  3. Finally, I replaced all references of <a href="/">Home</a> with our newly registered component <HomeLink />.

As you can imagine, this is very powerful because now any changes you want to make to the home link can be done from a single place. And once you make that change, it will automatically get propagated out to the rest of the page!

Simple Component Communication: Props

While the example above is useful from a reuse perspective, it is rather limited since it has a hardcoded URL and text. Wouldn't it be better if we could configure components? Thankfully, this is a simple matter through the props technique:

Props is an attribute you can define at the component level that will pass down to the template. Using our HomeLink component as an example, let's refactor it to a more generic component: NavLink.

// ./components/NavLink.vue
<script>
export default {
name: 'NavLink',
props: ['url', 'text']
}
</script>
<template>
<a :href="url">{{ text }}</a>
</template>

In our new NavLink component, we are defining two props that it will be receiving:

  • url - which is what will populate our href attribute.

  • text - which will populate the text that lives in the anchor tag.

This is how it would be used:

<script>
import NavLink from './components/NavLink.vue'
export default {
name: 'App',
components: {
NavLink
}
}
</script>
<template>
<div id="app">
<nav>
<NavLink url="/" text="Home" />
<NavLink url="/about" text="About" />
<NavLink url="/contact" text="Contact" />
</nav>
</div>
</template>

With this refactor, our application is easier to maintain since there is only a single file that contains all the configurations we need to be replicated across our app. In other words, once we make a change in that one file, it will be consistently applied throughout the rest of the app.

Exercise

You will find the source code for the exercises in the course's GitHub repo in the  cafe-with-a-vue folder. To get started, check out the  P2C2-Begin  branch.

Instructions

  1. Migrate  index.html  content into  cli-version/src/App.vue

  2. Migrate  images  directory into  cli-version/public

  3. Update path of images in  simpleMenu  to be relative instead absolute (by removing the  .  that is prefixing the URL)

  4. Create a component for  MenuItem.vue  and migrate menu items.

  5. Use props to ensure that  MenuItem  the data still renders correctly and it can still update the Cart count. (Hint: You can pass functions down as props)

Let's Recap!

Congratulations on learning how to create and navigate components! In this chapter, you have acquired the ability to:

  • Identify components on a web page.

  • Create components with single-file components.

  • Use components within other components.

  • Pass data into components with props.

Next, you'll learn about an important function to any application: navigation!

Example of certificate of achievement
Example of certificate of achievement