Skip to content

Dynamically show a Vue 2 component

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>

→ Get my Vue.js 2 Handbook

→ I wrote 17 books to help you become a better developer:

  • C Handbook
  • Command Line Handbook
  • CSS Handbook
  • Express Handbook
  • Git Cheat Sheet
  • Go Handbook
  • HTML Handbook
  • JS Handbook
  • Laravel Handbook
  • Next.js Handbook
  • Node.js Handbook
  • PHP Handbook
  • Python Handbook
  • React Handbook
  • SQL Handbook
  • Svelte Handbook
  • Swift Handbook
...download them all now!

Also, JOIN MY CODING BOOTCAMP, an amazing cohort course that will be a huge step up in your coding career - covering React, Next.js - next edition February 2025

Bootcamp 2025

Join the waiting list