Handling API Data and Managing Async Components with Vue.js

In Chapter 6, we focused on how components can communicate with each other with the use of properties, which are used for parent-to-child communications and events to handle messages sent from a child to a parent.

In this chapter, we will stay on the topic of communication by showing how to communicate with an external source, such as an API. External communication is a very common method when developing a dynamic website that cannot make use of static data, and learning how to manage asynchronous operations will not only result in a clean user experience but also help keep the application performant.

Loading data from an external source such as an API makes data handling more complicated. In fact, when the data is hardcoded, we do not have to worry about anything, as the information is immediately available, while when working with data that comes from an external source, we need to not only think about the empty state...