What Is a Render Function in Vue?

A render function is a way of describing what a component looks like in JavaScript instead of a template. In Vue, templates are already compiled into render functions at build time; writing a render function means doing that step by hand.

The h() function

In Vue, render functions create virtual DOM nodes (VNodes) with h(), called as h(tag, attributes, children):

import { createApp, h, ref } from 'vue';

const Counter = {
  setup() {
    const count = ref(0);
    // When setup returns a function, it becomes the render function
    return () =>
      h('div', [
        h('p', `Count: ${count.value}`),
        h('button', { onClick: () => count.value++ }, 'Increment'),
      ]);
  },
};

createApp(Counter).mount('#app');

This component gives the same result as a counter written with a template. When the reactive count changes, the render function runs again and Vue updates only the part of the DOM that changed.

When to use it

• When the structure of the output is very dynamic (for example a heading whose level h1–h6 comes from a parameter).
• When writing library components that need to handle slots and VNodes programmatically.
• When you prefer JSX (Vue supports it through a Babel or Vite plugin).

For most components templates are more readable and benefit more from compiler optimisations, so render functions are usually kept for special cases.

Note: React has a similar concept: the render() method of class components and the JSX returned by function components describe what appears on the screen.