Dynamic components in Vue 3.

Create dynamic components from JSON .

Published in

Geek Culture

4 min readJun 21, 2021

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.

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

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

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

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.

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.

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.