Building up the app

In this chapter, we will add a couple of components and compose the Todo app to follow the requirements, as listed at the beginning of this chapter (see Technical requirements). We’ll add the features step by step.

Let’s start simply, with an AppHeader component. Create the AppHeader.vue (remember: Vue.js recommends a filename that consists of at least two camel-cased words) file in the components folder. This will just be a static component with a template and css block:

<template>  <header>
    <h1><span class="icon" aria-hidden="true">✅</span> To do</h1>
    <p>Building Real-world Web Applications with Vue.js 3</p>
  </header>
</template>
<style scoped>
header {
  border-bottom: #333 1px solid;
  background-color: #fff;
}
header::after {
  content: ""...