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>
- dynamic component holder. Notice is the 'is' binding variable
- 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