Implementing our new To-Do application

At the beginning of this chapter, we saw a design for our new to-do application, and we sliced it into hierarchical components (see Figure 4.1). To follow the rest of this section, you will need a copy of the source code from this book’s GitHub repository (https://github.com/PacktPublishing/Vue.js-3-Design-Patterns-and-Best-Practices). As our code base grows, it is not possible to see each piece of implementation in detail, so we will focus on the main changes and specific bits of code. With that in mind, let’s review the changes from the previous implementation, roughly in order of file execution. To start, we added two new directories to our project:

• /src/plugins, where we placed our Modals plugin.
• /src/services, where we place modules with our business or middleware logic. Here, we created a service object to handle the business logic of our To-Do list: the todo.js file.

In main.js, we import and add our plugin...