Complete Vue.js 3 Guide [11/10]

Starting from this lesson, we will learn the render function. It enables us to generate page elements programmatically.

Open the Vue API and scroll down, you will find a method named H. The H method is what we use to generate page elements.

Let’s use the chid component as an example. We remove its template option. We will recreate the same template using the H method.

The H method cannot work alone. It needs an external environment which is created by the render option.

The render option is set using the factory pattern. We must assign a full function to the render option. Do not use the arrow function here. We need THIS in it to point to the component instance.

Inside the render function, we return the H method. In Vue 2, the H method was passed to the render function as its callback. In Vue 3, we access it via the Vue api.