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
Did you find this article valuable?
Support Tham by becoming a sponsor. Any amount is appreciated!