Chapter 7. Advanced components and routing

Now that we’ve looked at components and how they can be used to break applications into smaller parts, let’s look deeper into components and explore more of their advanced features. These features will help us create more dynamic and robust applications.

We’ll look at slots first. Slots interweave the parent’s content with the child components template, making it easier to dynamically update content inside components. Then we’ll move on to dynamic components, which offer the ability to switch out components in real time. This feature makes it easy to change out whole components based on user action. For example, you might be creating an admin panel that displays multiple graphs. You can easily swap out each graph with dynamic components based on user action.

We’ll also look at async components and how to divide an application into smaller chunks. Each chunk will load only when needed—a nice addition when our application grows large and we need to be sensitive to how much data we load when the application starts up.

7.1. Working with slots

7.2. A look at named slots

7.3. Scoped slots

7.4. Creating a dynamic components app

7.5. Setting up async components

7.6. Converting the pet store app using Vue-CLI

7.7. Routing

Exercise

Summary