Vue.js Render Function with h() Arguments

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 w3wiki");
  },
};

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

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

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

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

onClick function: Use the following syntax:

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

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:

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

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#render-functions-jsx