Vue.js Render Functions Component VNodes creation

Last Updated : 10 Jun, 2022

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 GeeksforGeeks');
},

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:

main.js

import { createApp } from "vue"; 
import App from "./App.jsx"; 
  
const app = createApp(App); 
  
app.mount("#app"); 

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

App.jsx

import { h } from "vue"; 
var gfgTitle = h("h1", { 
    style: { 
        color: "green", 
        width: "fit-content", 
        margin: "auto"
    }, 
    innerHTML: "Welcome to GeeksforGeeks", 
}); 
var topic = h("p", { 
    style: { width: "fit-content", margin: "auto" }, 
    innerHTML: "Vue.js Render Functions Component VNodes creation", 
}); 
  
export default { 
    data() { 
        return { 
            tutorials: ["Data Structures", 
                "Algorithms", 
                "Web Development"] 
        }; 
    }, 
    render() { 
        return [ 
            gfgTitle, 
            topic, 
            Array.from(this.tutorials).map((elem, index) => { 
                return h("p", elem); 
            }), 
        ]; 
    }, 
}; 