Cracking the code on dynamic components in Vue 3

Dynamic components in Vue 3 offer a solution for changing components during user interaction while maintaining code readability within the presentation layer (template tags). This desirable effect makes it easier for others to understand the code we write and, most importantly, maintain it in the future.

With dynamic components, we don't need to deal with multiple conditional structures such as v-if, v-else, and v-else-if. Instead of replicating the same props or emitted actions across numerous conditional branches, dynamic components enable a cleaner, more efficient approach. It results in more concise and transparent code, allowing for smoother development and easier maintenance.

To render a dynamic component in Vue, use straightforward syntax consisting of the built-in Vue component and pass it an attribute that indicates which element should be rendered. The key attribute used here is: is, which takes the component's name to be rendered as its value. For example, you can set is="currentComponent," where currentComponent is a data property that determines which component to display at any given time.

<component :is="currentComponent" />

When a dynamic component changes, it is removed from the DOM tree, meaning all data it held before the change will be lost. This behavior may not always be what we expect, especially in scenarios where maintaining the component's state is crucial, such as in form inputs, user sessions, or any element with a complex internal state that should persist across different views.

To address this issue, the Vue team has prepared a built-in component called <keep-alive> for such situations. The <keep-alive> component wraps dynamic components and prevents them from being removed from the DOM tree, thereby preserving their state. When a component wrapped in <keep-alive> is no longer active, it is simply cached.

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

Lazy loading is a technique for improving the performance of a Vue 3 application by loading dynamic components only when they are needed. This approach is particularly beneficial in large applications, where loading all components upfront can result in longer initial load times and increased resource usage. By lazy loading dynamic components, you can ensure that only the necessary parts of your application are loaded, resulting in faster load times and a smoother user experience.

In Vue 3, lazy loading components is straightforward with the “defineAsyncComponent” function. This function enables you to define components that will be loaded asynchronously only when needed, optimizing your application’s performance and reducing initial load times.

<template>
 <button @click="componentToRender = 'welcome'">Welcome component</button>
 <button @click="componentToRender = 'hello'">Hello component</button>
 <component :is="currentComponent" />
</template>


<script setup lang="ts">
import { defineAsyncComponent, computed, ref } from 'vue'


const asyncComponents = {
 welcome: defineAsyncComponent(() => import('@/components/TheWelcome.vue')),
 hello: defineAsyncComponent(() => import('@/components/HelloWorld.vue'))
}


const componentToRender = ref<keyof typeof asyncComponents>('hello')


const currentComponent = computed(() => {
 return asyncComponents[componentToRender.value]
})
</script>

Dynamic components can be used in various scenarios, such as multi-step forms commonly found on e-commerce platforms. In these forms, users must provide their information, choose delivery options, and select payment methods. 

In this example, we won't use the built-in <keep-alive> component because we'll pass data to the dynamic component using attributes, but we will use lazy loading to improve performance.

<template>
  <div>
    <component :is="currentStep"
               :data="formData"
               @next="nextStep"
               @prev="prevStep"
    />
    
    <div class="buttons">
      <button v-if="currentStepIndex !== 0"@click="prevStep">Previous</button>
      <button v-if="currentStepIndex !== steps.length - 1" @click="nextStep">Next</button>
      <button v-else @click="submitForm">Submit</button>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, defineAsyncComponent } from 'vue';

const currentStepIndex = ref(0);
const formData = ref({});

const currentStep = computed(() => {
  const stepComponent = [
    defineAsyncComponent(() => import('./Step1.vue'),
    defineAsyncComponent(() => import('./Step2.vue'),
    defineAsyncComponent(() => import('./Step3.vue')
  ]

  return stepComponent[currentStepIndex.value]
});

const nextStep = (data) => {
  formData.value = { ...formData.value, ...data };
  currentStepIndex.value++;
};

const prevStep = () => {
  currentStepIndex.value--;
};

const submitForm = () => { ... };
</script>

Understanding and effectively utilizing dynamic components in Vue 3 can significantly enhance your applications' development process and user experience. By offering a streamlined way to switch between components and manage state, dynamic components allow for more maintainable, readable, and efficient code. 

The built-in <keep-alive> component further extends this functionality by preserving component state across changes, ensuring a smooth and consistent user experience. Whether you're building multi-step forms, dynamic dashboards, or interactive user interfaces, dynamic components provide a powerful toolset for creating responsive and adaptive applications. 

As you incorporate these techniques into your projects, dynamic components simplify complex UI logic and significantly improve development efficiency and maintainability. Vue’s dynamic component feature proves invaluable for maintaining code modularity and enhancing user engagement.