VueJS - Render Functions & h

decoding the mysterious h function in the begining code of a vue project

VueJS - Render Functions & h

Doubts on the render property

new Vue({
  render: h => h(App),

h => h(App)


/* original */
hello = function() {
  return "Hello World!";

/* Arrow function */
hello = () => {
  return "Hello World!";

/* Arrow function with defualt return */
hello = () => "Hello World!";

/* Arrow function with Parameters */
hello = (val) => "Hello " + val;

/* Arrow function without Parentheses */
hello = val => "Hello " + val;


const h = this.$createElement

Aliasing createElement to h is a common convention you’ll see in the Vue ecosystem and is actually required for JSX. Starting with version 3.4.0 of the Babel plugin for Vue, we automatically inject const h = this.$createElement in any method and getter (not functions or arrow functions), declared in ES2015 syntax that has JSX, so you can drop the (h) parameter. With prior versions of the plugin, your app would throw an error if h was not available in the scope.

from the Official Vue Guide


A function to create Virtual DOM in Vue

render property