0Pricing
Vue Academy · Lesson

The h() Function Deep Dive

h(type, props, children) signature, VNode structure, rendering dynamic component types.

The h() Function Deep Dive is a free Vue Academy lesson on CoddyKit — lesson 1 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Vue Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

What is the h Function

The h function (short for hyperscript) creates virtual DOM nodes (VNodes) directly in JavaScript. It is the foundation that templates compile down to. A render function returns the result of calling h.

The Signature

h takes three arguments: h(type, props, children). The type can be a tag name string, a component object, or a functional component. props is an object of attributes, props, and events. children is text, an array of VNodes, or a slots object.

import { h } from "vue";

h(type, props, children);

A Simple Element

Passing a tag name and a props object with a class produces a styled element. The third argument here is plain text content.

import { h } from "vue";

h("div", { class: "foo" }, "text");
// renders: <div class="foo">text</div>

Props vs Attributes

Everything goes in the same props object: HTML attributes, DOM props, class, style, and event listeners. Vue figures out where each one belongs at patch time.

h("input", {
  type: "text",
  value: "hello",
  class: "field",
  placeholder: "Type here"
});

Arrays of Children

When an element has multiple children, pass an array of VNodes as the third argument. Each child is itself a call to h.

h("ul", null, [
  h("li", null, "item")
]);
// renders: <ul><li>item</li></ul>

Passing null for No Props

If an element has no props you can pass null (or an empty object) as the second argument so children stay in the third slot.

h("ul", null, [
  h("li", null, "first"),
  h("li", null, "second")
]);

Rendering a Component

The type argument can be an imported component. Props you pass become that component's props.

import { h } from "vue";
import MyComponent from "./MyComponent.vue";

h(MyComponent, { title: "Hello" });

Passing Slots as an Object

To pass slot content to a component, the children argument becomes an object of functions. Each key is a slot name and each value is a function returning VNodes or text.

h(MyComponent, { title: "Hello" }, {
  default: () => "slot content"
});

Named and Scoped Slots

Multiple slots are just multiple keys. Scoped slots receive their props as the function argument.

h(MyComponent, null, {
  header: () => h("h1", null, "Title"),
  default: (props) => h("p", null, props.text)
});

Event Listeners

Events are props prefixed with on followed by the PascalCase event name. A click listener is the onClick prop.

h("button", {
  onClick: () => console.log("clicked")
}, "Press me");

Returning h from a Render Function

Inside setup you can return a render function instead of a template. It is called on every re-render to produce the VNode tree.

import { h, ref } from "vue";

export default {
  setup() {
    const count = ref(0);
    return () => h("button", {
      onClick: () => count.value++
    }, "Count: " + count.value);
  }
};

Quick Check

How do you pass default slot content to a component using h?

Recap

The h function builds VNodes with h(type, props, children). Type is a tag or component, props holds attributes and onEvent listeners, and children is text, an array of VNodes, or a slots object of functions. Render functions return h calls and run on every re-render.

Frequently asked questions

Is the “The h() Function Deep Dive” lesson free?

Yes — the full text of “The h() Function Deep Dive” is free to read here on the web, and the Vue Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Vue Academy course, upgrade to CoddyKit PRO.

What will I learn in “The h() Function Deep Dive”?

h(type, props, children) signature, VNode structure, rendering dynamic component types. You practise Vue Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Vue Academy?

No prior experience is required. Vue Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “The h() Function Deep Dive” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Vue Academy lesson?

Yes. Every Vue Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

  1. The h() Function Deep Dive
  2. JSX in Vue 3 with Vite
  3. Dynamic Components with render Functions
  4. Higher-Order Components (HOC) Pattern
← Back to Vue Academy