Variable Components

Vue offers a lot of flexibility in templating. For example, v-if, v-else, and v-for allow us to switch between different components when necessary and help cover various use cases. Sometimes though, v-if adds a lot of overhead and leads to duplicate code. Variable components enable us to mitigate this issue.

What are variable components?

Vue offers a particular component simply called <component>. It technically provides all the features that every other component does with one addition—we can tell which actual component it should be. We do that with the :is prop. Since any HTML element is also a component, the most basic example of using a variable component is to make it behave like an HTML element.