How To Use/Create Dynamic Component In Vue js Tutorial Example?

How to use the dynamic component in vuejs? In this post, We will learn how to use the dynamic component in vuejs. This is a very easy and very powerful logic behind for use maximum use single component in vuejs.

Vue dynamic components make it very easy and it can be an extremely convenient way to make our component and our code both more readable and adaptable. There were simply condition for the use dynamic component.

We can use several ways and different requirements in our project, We can also define several ways in the root component of our vuejs project. It depends on our requirement and how We want to use it. Here in this post io have taken a simple example to use the dynamic component in our vue project.

Routes link instead We can dynamic component on the different event like We can call on click event or We can use it on success response We want to show another component not want to redirect on another component We can still use it.

Using keep-alive We can cache our component input fill data. there is no fear of loss data from the component.

So let's start with how to use the dynamic component in vuejs.

Create Component

First, We will create two sample components, In this post, I have created two-component (1) ContactForm.vue and (2) HomeDashboard.vue.

These two components we will use in App.vue root component and will call it dynamic on click event.

<template>
    <div>
        <h1>This is our contact form</h1> 
    </div>
</template>

<script>
export default {
    name:'ContactForm',
}
</script>

<template>
    <div>
        <h1>This is our HomeDashboard page.</h1> 
    </div>
</template>

<script>
export default {
    name:'HomeDashboard'
}
</script>

Root App Component

This is our Root Component, First, we will import the two-component that we create in the before step. After importing we will define it in the component attribute and we will give a name, We can see contact-form defined in the components attributes with these names. So now both components are ready to use.

Both components still we can use directly but we want to use dynamic and want to called on click event fire.

We will create a tag name with a component and in this tag will define a "is" attribute with bind and inside define a variable.

After it, We will add two buttons one for each component, and add an event so whenever we clicked on the button that component name will add this given variable and it will change the component itself.

<template>
<div id="app">
    <button @click="componentName = 'home-dashboard'">Home</button>
    <button @click="componentName = 'contact-form'">Contact Form</button>
    <component :is="componentName"></component>
</div>
</template>

<script>

import HomeDashboard from './components/HomeDashboard.vue'
import ContactForm from './components/ContactForm.vue'

export default {
    name: 'App',

    components:{
        'home-dashboard' : HomeDashboard,
        'contact-form' : ContactForm 
    },

    data() {
        return {
        componentName:'home-dashboard'
        }
    },
}
</script>

<style>
#app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
}
button{
    margin: 0 10px 0 10px;
}
</style>

Conclusion

Using dynamic components we can reuse code maximum time and very cleaver to tabling from one component to another component. Also, This is not complete to develop We can also use dynamic component-based API response and We can call different dynamic components from API for a large project.

Dharmesh Chauhan

(Swapinfoway Founder)

Hello Sir, We are brothers origin from Gujarat India, Fullstack developers working together since 2016. We have lots of skills in web development in different technologies here I mention PHP, Laravel, Javascript, Vuejs, Ajax, API, Payment Gateway Integration, Database, HTML5, CSS3, and Server Administration. So you need our service Please Contact Us

Haresh Chauhan

(Co-Founder)