Creating a Todo List App

Now that we have a development environment set up, we will get started with writing a small first application. In this chapter, we will create a Todo list app, which will teach us how the reactivity of Vue.js and the virtual DOM works. You can use the Todo list app as a guide to track progress in this book!

Let’s make it an assignment with some practical requirements:

• We will make sure that you see a list of items
• Each item will have a checkbox
• The list will be sorted by unchecked items first and checked items second
• The status of an item should be preserved by the browser on future visits

There are different ways of writing a valid Vue.js component. Currently, the Composition API is preferred over the Options API. The Options API uses an object-oriented approach, while the Composition API allows for a more reusable way of writing and organizing your code.

In this book, we will use the Composition API notation with shorthand...

A new project

Let’s start by scaffolding out a new project, using the CLI commands from the previous chapter. Open a Terminal window in your projects folder and use the following instructions:

npm init vue@latest

Hit y to proceed, use vue-todo-list as the project name, and select the options shown in the following screenshot:

Figure 2.1 – The setup configuration for the Todo list app

Go ahead and follow the given instructions to install the dependencies and open your favorite IDE to get started.

Tip

npm offers a shorthand for installing, by typing npm i instead of npm install. Read more about npm commands here: https://docs.npmjs.com/cli/v6/commands.

Cleaning up the default installation

Let’s first clean up the components folder by removing HelloWorld.vue, TheWelcome.vue, WelcomeItem.vue, and the icons folder. Then we’ll remove the references from App.vue and clean up the template.

You will see a __tests__...

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: ""...

Reactivity explained

If you have opened the app and clicked an item, you can toggle the checkbox, but on refreshing the page, nothing happens. Also, if you’ve looked closely at the CSS of the <ListItem /> component, you may have noticed that strikethrough styling should be applied on a checked item. This is only the case on the first item.

The toggling of the checkbox is, in fact, native browser behavior and doesn’t signify anything in the context of the state of the Todo list!

We need to wire the changes in the UI to the state of the application. In order to get started, we need to import some utilities from the Vue.js package. Add these two lines to the top of the <script> block:

import { ref } from 'vue'import type { Ref } from 'vue'

The ref function is used to add reactivity and track updates to certain parts of the code. The value of ref is automatically inferred by TypeScript, but for complex types, we can specify the...

Single File Components

The way that we have organized the app, with individual components having a single feature to fulfill is referred to as the Single File Components (SFC) philosophy.

This approach is designed to enhance code readability, maintenance, and reusability. With SFC, you can create reusable and modular components that can be easily shared and reused across different projects.

To be fair, we did cut some corners with the TodoList.vue component, since we could have abstracted the getting and setting of the listItems to a different component. For the sake of this example, however, it illustrates the capabilities in an acceptable way. There are no strict rules or guidelines for how you structure your components.

Note that you can structure or restructure the contents of the script block in a way that makes sense to you. You have the freedom to group related sets together, which makes for very readable code that’s easy to refactor.

The Vue.js DevTools

If you’ve not yet installed the Vue.js DevTools, please refer back to the Vue.js DevTools section in Chapter 1, Introduction to Vue.js, to follow the instructions. We will take a close look at the DevTools using our Todo list application for reference.

If you have the browser plugin installed and you visit a website where Vue.js is detected, the icon in the toolbar will indicate that Vue.js is detected on that particular URL:

Figure 2.4 – Screenshot of Vue DevTools in the browser’s toolbar

If you click it, it will refer you to opening the browser’s DevTools, where a tab dedicated to Vue is added.

The Vue.js tab offers a lot of ways of drilling down into a certain aspect of the rendered code and some time travel inspection methods. It offers an accessible representation of the inputs and outputs of a component, which can help you visualize how a component is rendered.

So, let’s zoom in on a...

Summary

At this point, we’ve used the Vue CLI tool to create and customize our app boilerplate settings. We’ve been using two-way data binding, which translates to the reactivity in our applications. Using and applying the Single File Components philosophy, we can now apply this to build applications that are maintainable at any scale.

With Vue DevTools, we have learned a means of inspecting components and can apply this to debug our applications.

In the next chapter, we’ll connect our application with external APIs, giving it real-time data to work with.