Let's review the auto-generated App component, as shown in the following example:

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>
 
<script>
import HelloWorld from './components/HelloWorld.vue'
 
export default {
  name: 'app',
  components: {
    HelloWorld
  }
}
</script>
 
<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

As you can see from the preceding code snippet, Vue supports using standard web constructs to compose components. Typically, single file components are written in files with a .vue extension and include three sections :

• <template>:
  This tag contains the view of the component. Similar to Angular, this is an HTML-like construct that supports additional specifications such as data-binding annotations, directives, and more.
• <script>:
  This tag contains the definition of the component, as well as its behavior implementation, and is exported as a plain object.
  While the object can include many properties, most of which are covered later in this chapter, here you can see a few as follows:
  • name: The component's name that other components can use to reference it in their templates.
  • components: The referenced child components this component renders. When a parent component uses child components, these child components must be recognized by Vue. While there are several ways to do that, the components property is a simple way to specify the referenced child components.
    In this example, the App component renders the HelloWorld component as part of its template, and therefore it is specified as part of the components property as well.
• <style>:
  This tag contains the component-related CSS-style definitions. By default, Vue doesn't apply any sort of style encapsulation, but you can enable that by specifying a scoped attribute on the style tag, as shown in the following example:

<style scoped>
…
</style>

Specifying the scoped attribute instructs Vue to process the style definitions and provide style encapsulation. Often, this is the preferred approach when writing specific and encapsulated components.

In this chapter, you're going to implement the following components:

• App
• Header
• ProductsPage
• CategoryMenu
• CategoryMenuItem
• ProductList
• ProductCard
• Busy

The following diagram depicts the component hierarchy and dependency graph you're going to implement in this chapter -