What are dynamic components and how to implement them in Vue.js?

Dynamic components in Vue are components that are rendered dynamically depending on certain conditions or business logic.

To render components dynamically, Vue uses a special tag <component> along with is attribute.

<component :is="currentComponent"></component>

Where, is attribute contains the name of the component that needs to be rendered.

Let’s look at an example to understand it better. We will begin by creating a new application using Vue CLI.

❯ vue create dynamic-components-demo

Once, the installation is complete, we can navigate to the folder and run the server to load the application.

❯ cd dynamic-components-demo
❯ npm run serve

This will run our server on port 8080 by default http://localhost:8080/

To demonstrate the working of dynamic components we will create three components and call them Tab1Component, Tab2Component, and Tab3Component.

// Terminal

❯ touch src/components/Tab1Component.vue
❯ touch src/components/Tab2Component.vue
❯ touch src/components/Tab3Component.vue

Let’s add some template code to all the newly created components.

// Tab1Component.vue

<template>
  <h1>Tab 1 Component</h1>
</template>

// Tab2Component.vue

<template>
  <h1>Tab 2 Component</h1>
</template>

// Tab3Component.vue

<template>
  <h1>Tab 3 Component</h1>
</template>

After this, we will import all three component files in the App.vue file.

// App.vue

<template>
  <Tab1Component />
  <Tab2Component />
  <Tab3Component />
</template>

<script>
import Tab1Component from "./components/Tab1Component.vue";
import Tab2Component from "./components/Tab2Component.vue";
import Tab3Component from "./components/Tab3Component.vue";

export default {
  name: "App",
  components: {
    Tab1Component,
    Tab2Component,
    Tab3Component,
  },
};
</script>

This will give us the output:

As you can see, all three components are visible. To make them dynamic, let’s add buttons such that on click of a button a particular component shows up. For example, on click of the first button, Tab1Component shows up, on click of the second button, Tab2Component shows up, and so on.

// App.vue

<button>Tab1Component</button>
<button>Tab2Component</button>
<button>Tab3Component</button>

We will also need to add the <component> element to make all three components dynamic.

// App.vue

<component :is="currentComponent"></component>

Here, currentComponent is the property that will hold the component’s name. Let’s make Tab1Component the default value.

// App.vue

data() {
  return {
    currentComponent: "Tab1Component",
  };
}

We also want to make sure that a method gets invoked when a button is clicked to change the component rendered.

<button @click="selectComponent('Tab1Component')">Tab1Component</button>
<button @click="selectComponent('Tab2Component')">Tab2Component</button>
<button @click="selectComponent('Tab3Component')">Tab3Component</button>

In this case, we have selectComponent() method that takes one argument which will be the name of the component that needs to be displayed. Let’s also implement the logic for the selectComponent() method.

// App.vue

selectComponent(componentName) {
  this.currentComponent = componentName;
}

In this method, we are simply assigning the property currentComponent to the parameter componentName which contains the name of the component to be displayed.

With this, we can omit all three components defined in our App.vue file since they will now be displayed dynamically.

So, the entire App.vue file now will contain the following code:

// App.vue

<template>
  <component :is="currentComponent"></component>
  <button @click="selectComponent('Tab1Component')">Tab1Component</button>
  <button @click="selectComponent('Tab2Component')">Tab2Component</button>
  <button @click="selectComponent('Tab3Component')">Tab3Component</button>
</template>

<script>
import Tab1Component from "./components/Tab1Component.vue";
import Tab2Component from "./components/Tab2Component.vue";
import Tab3Component from "./components/Tab3Component.vue";

export default {
  name: "App",
  data() {
    return {
      currentComponent: "Tab1Component",
    };
  },
  components: {
    Tab1Component,
    Tab2Component,
    Tab3Component,
  },
  methods: {
    selectComponent(componentName) {
      this.currentComponent = componentName;
    },
  },
};
</script>

With the help of <component>, instead of displaying all three components, we are only displaying a component dynamically depending on which button is clicked. This way we can easily switch between components dynamically in Vue.