Dynamic components in Vue 3.
By: Hariprasad K.B
Tags: Vue, Front End Development, Vuejs, Dynamic Components, Json

Dynamic components in Vue 3.

Vue is undoubtedly one of the most loved frontend javascript frameworks. We are going to create is a dynamic reusable component in Vue which is rendered completely by a JSON object. The JSON object can be kept in the frontend or can be received from the backend through rest api.

The above code is an example JSON object. We will demystify the structure in a moment but before that let’s see the below image which is the rendered html for this JSON.

Final Rendered HTML

Each and every property of the JSON is explained below. We can add more properties to the object and make required changes in the code to create more dynamic components. Here I have created only a few, for demonstration purpose.

1.label - Label that is displayed ,

2.type - Type of component rendered like input, select..

3.state - which data property is created for this component to store the data.

4.options - This is the options array for select component specific to <select />

Now let’s actually jump into the code . 👨‍💻

We are creating three different components input , select and a text display

Input.vue

Input.vue component

In this component the label and value are passed down as props and '@input' we are emitting $event which means when you type something in the input box the data will be passed to the parent component as an event

2. SelectList.vue

SelectList.vue component

Main difference in the select component is that we are getting one more props that is options to show the different options and instead of '@input' we are using '@change' .

3. TextDisplay.vue

TextDisplay.vue component

This component is used just display the data so no $event is emitted as we are not mutating any state.

Now we will create a DynamicRenderer component which will select required component from the value of type in the JSON. Now you would have noticed the values in type are the component name’s.

DynamicRenderer component

In this DynamicRenderer the main flexibility that Vue provides is <component></component> which is a Dynamic component which can take any component and dynamically render them (we can also conditionally render with v-if ). You can see that :is="schema.type" where schme.type is the component type from the JSON. If an input event is triggered then we are emitting an input event with state (which is the key for the data property) and event.target.value (which is the value event emitted from the child component).

Finally we can use this <DynamicRenderer/> component for rendering dynamic forms.

We have used it in the App.vue as shown below.

App.vue -> DynamicRenderer is used

Here you can see that the component <DynamicRenderer/> takes the typeSchema and a data property and '@input' will call a method updateData which will update the data property with key as state and the value as value . If you are using Vue 2 then change this.data[state] = value to this.$set(this.data,state,value) .

Now let me show you the power of this component by changing just the schema.

Changed json

And here is the rendered HTML with the data property consoled.

Rendered HTM with data in the console

Here is the github repository for all the code explained in this article.

If you like the content please follow me here @medium and at linkdin

You can subscribe to my email list