O'Reilly logo

The Majesty of Vue.js by Kostas Maniatis, Alex Kyriakidis

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Chapter 15. Swapping Components

Using single file components is the simplest way to build a single page application with Vue. Using them requires to get familiar with many—if not all—features provided. We saw in this chapter how to set up a fresh project, create *.vue files and manage duplicate state so far. Now it's time to review a way to swap view-specific components.

For reference in the previous examples, we had three components inside App.vue and some others nested within. Not very manageable or expandable. Consequently, we need to practice ways on how to swap components dynamically, so we won't need to fill a page with them. Let's see some examples.

Dynamic components

The is component

One way to surpass this, is to use the reserved <component> ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required