Vue Tip: When to Use Render Function

There are very few cases where you should use a render function instead of regular templates to create components in Vue.js.

Avoiding rendering functions results in code that is much easier to read and more accessible to other developers.

I think that render functions are a difficult-to-read mix of HTML and JavaScript.

Avoiding render functions is also the recommended approach in the Vue documentation:

Code Examples

Let's compare a simple example using the <template> tag and render function. First the regular Vue component code:

<template>
  <div class="wrapper">
    <p class="any-class">Lorem Ipsum</p>
  </div>
</template>

And this would be the equivalent using render function:

<script setup>
import { h } from 'vue'

const render = h(
  'div', // type
  { class: 'wrapper' }, // props
  [h('div', { class: 'any-class', innerHTML: 'Lorem Ipsum' }, [])] // children
)
</script>

<template>
  <render />
</template>

SFC Playground

Render Function Scenarios

Render functions are required when there is a necessity for harnessing the complete programmatic capabilities of JavaScript, such as gaining greater authority over how an application is rendered. Vue libraries development greatly benefits from render functions, which are also employed by a specific subset of developers.

This article explains a few render functions use-cases.