## 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>
<div v-else>
<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>