I had a situation where I need to load a component based on the link I clicked. I am going to explain the problem statement with user profile section. Where I have few links called, 'General', 'Change password' and 'Dashboard'. When I click on a particular link in the left side, the respective component should be loaded in the right side.

Vue.js provided an easy way to achieve this use-case with the concept of dynamic component loading. Vue.js also introduced a built-in component called .

Let me create a container component to show 3 links and the holder with which is where the component will be placed dynamically.

// views/profile.vue
<template>
  <section class="bg-gray-50">
    <div class="p-main">
      <div class="flex gap-4">
        <div class="w-1/4">
          <p @click="onChange('ProfileGeneral')" class="profile-link">General</p>
          <p @click="onChange('ProfileChangePassword')" class="profile-link">Change password</p>
          <p @click="onChange('ProfileDashboard')" class="profile-link">Dashboard</p>
        </div>
        <div class="flex-1">
          <component :is="component"></component> // -----------> (1)
        </div>
      </div>
    </div>
  </section>
</template>

<script>
import { ref } from 'vue';
import ProfileChangePassword from '../components/ProfileChangePassword.vue';
import ProfileDashboard from '../components/ProfileDashboard.vue';
import ProfileGeneral from '../components/ProfileGeneral.vue';
export default {
  name: 'UserProfile',
  components: {
    ProfileChangePassword,
    ProfileDashboard,
    ProfileGeneral
  },
  setup() {
    const component = ref('ProfileGeneral'); // -----------> (2)

    const onChange = (value) => {
      if (value === "ProfileChangePassword") {
        component.value = "ProfileChangePassword";
      } else if (value === "ProfileGeneral") {
        component.value = "ProfileGeneral";
      } else if (value === "ProfileDashboard") {
        component.value = "ProfileDashboard";
      }
    };

    return {
      component,
      onChange
    };
  }
}
</script>

<style scoped>
.profile-link {
  @apply cursor-pointer;
  @apply p-2;
}
</style>

1. dynamic component holder. Notice is the 'is' binding variable
2. dynamic component name will be passed to the through 'is' binding

Next I will show you the skeleton code for dynamic components.

// components/ProfileGeneral.vue
<template>
  Profile General
</template>

// components/ProfileChangePassword.vue
<template>
  Change password
</template>

// components/ProfileDashboard.vue
<template>
  Dashboard
</template>

Once everything is in place, the dynamic component loading will work seamlessly. The final output would be something like the below,

Keep learning