Dynamic Components in Vue

Welcome to The Coding College! Vue’s dynamic components allow you to switch between different components dynamically at runtime. This feature is particularly useful for creating reusable, flexible, and highly customizable user interfaces, such as tabs, carousels, or step-based forms.

In this guide, we’ll explore how dynamic components work, their use cases, and best practices for implementing them effectively.

What Are Dynamic Components?

Dynamic components in Vue enable you to render different components dynamically by binding the is attribute of the <component> element to a variable or condition.

Syntax Overview

<component :is="currentComponent"></component>
  • is: Determines which component to render.
  • currentComponent: A variable or computed property holding the name or reference of the component to display.

Example: Dynamic Component Basics

Step 1: Define Components

File: TabOne.vue

<template>
  <div>
    <h2>Tab One</h2>
    <p>This is the content of Tab One.</p>
  </div>
</template>

File: TabTwo.vue

<template>
  <div>
    <h2>Tab Two</h2>
    <p>This is the content of Tab Two.</p>
  </div>
</template>

File: TabThree.vue

<template>
  <div>
    <h2>Tab Three</h2>
    <p>This is the content of Tab Three.</p>
  </div>
</template>

Step 2: Use <component> for Dynamic Rendering

File: App.vue

<template>
  <div>
    <button @click="currentComponent = 'TabOne'">Show Tab One</button>
    <button @click="currentComponent = 'TabTwo'">Show Tab Two</button>
    <button @click="currentComponent = 'TabThree'">Show Tab Three</button>

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

<script>
import TabOne from './components/TabOne.vue';
import TabTwo from './components/TabTwo.vue';
import TabThree from './components/TabThree.vue';

export default {
  components: {
    TabOne,
    TabTwo,
    TabThree
  },
  data() {
    return {
      currentComponent: 'TabOne'
    };
  }
};
</script>

Rendered Output

  • When Tab One is selected:
<div>
  <h2>Tab One</h2>
  <p>This is the content of Tab One.</p>
</div>
  • Switching tabs updates the displayed content dynamically.

Dynamic Components with Props

You can pass props to dynamic components just like any other Vue component.

Example

File: DynamicMessage.vue

<template>
  <div>
    <h2>{{ title }}</h2>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  props: {
    title: String,
    message: String
  }
};
</script>

File: App.vue

<template>
  <div>
    <component :is="currentComponent" :title="title" :message="message"></component>

    <button @click="switchComponent('DynamicMessage')">Load Message</button>
  </div>
</template>

<script>
import DynamicMessage from './components/DynamicMessage.vue';

export default {
  components: {
    DynamicMessage
  },
  data() {
    return {
      currentComponent: null,
      title: 'Dynamic Message',
      message: 'This is passed as a prop!'
    };
  },
  methods: {
    switchComponent(componentName) {
      this.currentComponent = componentName;
    }
  }
};
</script>

Keep-Alive with Dynamic Components

To preserve the state of dynamically switched components, you can use Vue’s <keep-alive> wrapper.

Example

<template>
  <div>
    <keep-alive>
      <component :is="currentComponent"></component>
    </keep-alive>

    <button @click="currentComponent = 'TabOne'">Tab One</button>
    <button @click="currentComponent = 'TabTwo'">Tab Two</button>
  </div>
</template>

Using <keep-alive>, the state of each component is retained when it’s switched out, making it ideal for tabs or forms with intermediate steps.

Use Cases for Dynamic Components

  1. Tab Interfaces: Switch between different tabbed sections dynamically.
  2. Form Wizards: Dynamically load forms for multi-step processes.
  3. Modals and Dialogs: Display different modal components based on user actions.
  4. Dashboards: Render dashboard widgets dynamically.

Best Practices for Dynamic Components

  • Lazy Load Components: Use asynchronous components to optimize performance for large applications. 
const TabOne = () => import('./components/TabOne.vue');
  • Use keep-alive Wisely: Retain the state of components where necessary, but avoid overuse to prevent memory issues.
  • Prop Validation: Ensure props passed to dynamic components are properly validated to avoid runtime errors.
  • Document Component Options: Clearly describe which components can be dynamically rendered and their respective props.

Conclusion

Dynamic components are a cornerstone of Vue’s flexibility, enabling developers to create rich and adaptable user interfaces. By leveraging features like v-bind, keep-alive, and lazy loading, you can build scalable applications that respond to user interactions effortlessly.

For more Vue tutorials and development tips, visit The Coding College.

Leave a Comment