Vue.js Render Function with h() Arguments

Last Updated : 24 Apr, 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.

Render Function with h() Arguments allows the developers the full power to programmatically tackle the UI of the webpage. Generally, we use the template to render the output but just like ReactJs, we can use Javascript to render components. This is done using the Vnodes and the h() argument.

Creating the Vnodes with the h() argument: h() means Hyperscript which means javascript that produces HTML. The first parameter is the type of element and in the subsequent parameters, we send class, id, innerHTML, string or other vnodes, etc. A simple h() function to display a message will be as follows:

import { h } from "vue";
export default {
  render() {
    return h("div", "Welcome to GeeksforGeeks");
  },
};

className, id: To add these parameters, use the following syntax:

h(
  "div",
  {
    class: "container",
    id: "holder",
  },
  "Welcome to GeeksforGeeks"
);

Styling: To apply a style, use the following syntax:

h(
  "div",
  {
    style: { color: "green" },
  },
  "Welcome to GeeksforGeeks"
);

onClick function: Use the following syntax:

h(
  "div",
  {
    onClick: () => {
          console.log("Hello");
    },
  },
  "Welcome to GeeksforGeeks"
);

Example: In the following example, we have a simple webpage in vue using the h() arguments.

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 title and the topic.

App.jsx

import { h } from "vue"; 
export default { 
  render() { 
    return h( 
      "div", 
      h("center", { 
        innerHTML: 
          "<h1>GeeksforGeeks</h1> 
           <strong> 
                   Vue.js Render Function with h() Arguments 
           </strong>", 
      }) 
    ); 
  }, 
};