Vue.js Render Functions Component VNodes creation

Vue.js is a progressive javascript framework for developing web user interfaces. It is a performant, approachable, and versatile framework. We can create Single Page Applications as well as Full Stack applications. It is built on top of HTML, CSS, and Javascript which makes it easier for developers to integrate Vue.js in any application at any stage.

Vue.js Render Functions Component allows the creation of VNodes. VNodes contain many internal properties. VNodes cannot be duplicated, which means a tree can have only one instance of a VNode.

Syntax: Declare Render functions with VNodes as follows:

VNode: Creating a simple vnode displaying a welcome message.

function render() {
    return h('h3', 'Welcome to neveropen');
},

Duplicating VNodes: VNodes cannot be duplicated simply. But sometimes we may require to duplicate the component. So we need to use the factory function as follows:

function render() {
  return h(
    'div',
    Array.from({ length: 5 }).map(() => {
      return h('h3', 'welcome')
    })
  )
}

Example: In the following example, we have a webpage with a welcome message and a repeating component that contains some values stored in data.

Step 1: Create a new Vue.js project with the npm node.js package manager using the following command.

npm init vue@latest

Enter the project name and preset the project as follows:

 

Rename the App.vue file to App.jsx in the file and the file structure looks as follows:

 

Step 2: Change the import in the main.js file to as follows:

Step 3: In the App.jsx file, we will use the following code to display the contents.

Step 4: Run the project using the following command and see the output.

npm run dev

Output: On successfully building the project, open http://localhost:3000, and the result will be as follows.

 

Reference: https://vuejs.org/guide/extras/render-function.html