Vue Render Functions | VNode and h()

While writing a Vue component, we typically use HTML-like template syntax. This syntax makes the code more readable and easier to customize. Additionally, Vue provides an alternative to this template syntax for advanced usage.

In Vuejs, render functions provide a way to directly control the rendering process of your components. Instead of using the template syntax, you can write JavaScript code to describe the structure of your component.

Let's see how to use these render functions.

What is a Vue Template Syntax?

It would be helpful to remember you how to use template syntax in an application. Even a template syntax looks an HTML code snippets, it is actually a HTML-like structure including any data bindings and any directives such as v-if, v-for etc.

Here is an example of a basic Vue template:

<div id="app">
  <h1>{{ message }}</h1>
  <p v-if="showParagraph">This is a paragraph.</p>
  <button v-on:click="toggleParagraph">Toggle Paragraph</button>
</div>

This template includes HTML code as well as, string interpolation to pass data to the component, a v-if directive for conditionally displaying an element, a click directive for handling click event listeners, etc.

How To Create A Vue Component Without The Template Syntax

To create a Vue 3 Component without using a template, vue provides us render and h method for creating creating vnodes. h() means hyperscript which stands for JavaScript that produces HTML.

Here is an example of a basic Vue 3 component created without a template:

<script>
import { ref, h } from 'vue'

export default {
  setup() {
    const count = ref(1)

    // return the render function
    return () => h('div', count.value)
  }
}
</script>

The code snippet above uses the h function to create a virtual DOM element representing a div element with the value of the count variable as its content. The count variable is a reactive variable which means it triggers an update on the interface when its value changes.

What is the Vue h() Method

h() method accept objects to create nested components, pass props or other attributes such as id, class, etc. to the component. This provides to create more powerful components as in the template syntax.

// Class and id attributes can be passed
h('div', { id: 'my_button' })

// props and attributes can be added with . and ^ prefixes 
h('img', { '.name': 'some-name', '^width': '100' })

// listeners can passed for handling events
h('div', { onClick: () => {} })

// Nested components can be created
h('div', { id: 'my_div' }, [h('span', 'hello')])

As you can see, a component along with its attributes, listeners, props, other child components can be created using the h() method in Vue. Please check out the following example component created with the h() method.

// Javascript Syntax
import MyComponent from ./my_component

h('div', { 
  id: 'my_div',  
  onClick: () => {console.log('hello')} 
 }, 
 [h('span', h(MyComponent,{.name:"Jane"} ))])

// HTML-like Syntax

<template>
  <div id="my_div" @click="() => {console.log('hello')}">
    <span>
      <my-component :name="'Jane'" />
    </span>
  </div>
</template>

<script>
import MyComponent from './my_component.vue';

export default {
  components: {
    MyComponent,
  },
};
</script>

Why We Need Render and h() Method In Vue

We need to answer this question because it seems that this approach can make the code harder to read, maintain and refactor. However, To be honest, when we were creating a Vue component package for publishing to the npm registry, HTML-like syntax became insufficient to complete the component since we couldn’t predict how users would use these components. In this case, using the render function and the h() method made more sense with the power of javascript.

In this and similar cases, it might make sense to use this approach, albeit rare, which is probably why vuejs provided us with these methods.

More For H() and Render Method

We provided a beginners guide for these method however you can build more complex structures using v-if and v-for directives, slots and more so, Therefore, it would be very helpful to visit the vue doc page about this topic to learn more.

Conclusion

In this article we have disccussed creating vue 3 components without using HTML-like template syntax. Using Vue 3 without a template is an option for developers who want to use power of the javascript or who are more comfortable with plain JavaScript.

Ultimately, the decision to use Vue without a template will depend on the specific needs and preferences of your project and team.

Thank you for reading.