What this book covers
Chapter 1, Exploring the Book’s Layout and Companion App, covers the details of the Companion App and what it will include. This chapter defines the structure and methodology used throughout the book and includes important topics not related to the framework such as component-based architecture, atomic design, and core web development areas.
Chapter 2, The Foundation of Vue.js, focuses on providing vital information about the Vue.js framework. The chapter covers topics such as the reactivity system, component composition, and framework lifecycles.
Chapter 3, Making Our HTML Dynamic, is where we begin the work required to build our Companion App. We will learn how to initialize a Vue.js application and see the basic steps required to turn a static HTML file into a dynamic Vue.js component.
Chapter 4, Utilizing Vue’s Built-In Directives for Effortless Development, introduces one of the most important features of Vue.js: built-in directives. In this chapter, we will learn how to enhance the interactivity and dynamicity of our component by introducing the most important directives.
Chapter 5, Leveraging Computed Properties and Methods in Vue.js, teaches how to make our components concise and readable by introducing different techniques to handle data and logic within our components. This chapter introduces topics including Ref and Reactive data computed properties and methods that are the pillars of Vue.js logic.
Chapter 6, Event and Data Handling in Vue.js, expands our knowledge of the Vue.js framework by teaching us how to handle communication between components. We will also deepen our knowledge of props and introduce the notion of custom events.
Chapter 7, Handling API Data and Managing Async Components with Vue.js, teaches us how to deal with external asynchronous data. We will put into practice the notion of lifecycles and learn how to handle asynchronous data with watch
and <suspense>
.
Chapter 8, Testing Your App with Vitest and Cypress, will provide us with the tools necessary to ensure our code is well written by introducing testing. This chapter covers testing in general and then defines both unit tests using Vitest and E2E tests with Playwright for testing our existing Companion App components.
Chapter 9, Introduction to Advanced Vue.js Techniques – Slots, Lifecycle, and Template Refs, brings you back to the core of Vue.js and introduces advanced techniques. The chapters cover advanced topics such as slots, lifecycles, and Template Refs.
Chapter 10, Handling Routing with Vue Router, introduces the first external package: vue-router. In this chapter, we will add routing to our Companion App. We will learn how to define our router and how to navigate within our application.
Chapter 11, Managing Our Application’s State with Pinia, focuses on state management and introduces a new core package: Pinia. We will learn how state management can simplify our application and create multiple example stores within our Companion App to learn about the different features that Pinia has to offer.
Chapter 12, Achieving Client-Side Validation with VeeValidate, introduces the topics of form handling and validation. We will review the Vue.js native tools for handling forms such as v-model, and cover advanced cases by introducing VeeValidate.
Chapter 13, Unveiling Application Issues with the Vue Devtools, takes a step back from the development of our Companion App and focuses on the debugging techniques required to improve our skills and understanding of the Vue.js framework.
Chapter 14, Advanced Resources for Future Reading, concludes our journey with some further reading and materials that will help you continue your learning of the Vue.js framework.