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