Dynamically show a Vue 2 component
New Courses Coming Soon
Join the waiting lists
Using Vue you define the application layout using components. In the beginning you manually place components where you want, but at some point you need to have a more flexible way to show or hide components based on the application state
Using conditional directives
The simplest option is to use the v-if
and v-else
directives.
Here’s an example. The v-if
directive checks the noTodos
computed property, which returns false if the state property todos
contains at least one item:
<template>
<main>
<AddFirstTodo v-if="noTodos" />
<div v-else>
<AddTodo />
<Todos :todos=todos />
</div>
</main>
</template>
<script>
export default {
data() {
return {
todos: [],
}
},
computed: {
noTodos() {
return this.todos.length === 0
}
}
}
</script>
This allows to solve the needs of many applications without reaching for more complex setups. Conditionals can be nested, too, like this:
<template>
<main>
<Component1 v-if="shouldShowComponent1" />
<div v-else>
<Component2 v-if="shouldShowComponent2" />
<div v-else>
<Component3 />
</div>
</div>
</main>
</template>
Using the component
Component and is
Instead of creating v-if
and v-else
structures, you can build your template so that there’s a placeholder that will be dynamically assigned a component.
That’s what the component
component does, with the help of the v-bind:is
directive.
<component v-bind:is="componentName"></component>
componentName
is a property of the state that identifies the name of the component that we want to render. It can be part of the state, or a computed property:
<script>
export default {
data() {
return {
componentName: 'aComponent',
}
}
}
</script>
Here is how can I help you:
- COURSES where I teach everything I know
- CODING BOOTCAMP cohort course - next edition in 2025
- BOOKS 16 coding ebooks you can download for free on JS Python C PHP and lots more
- Follow me on X