Javascript is required
·
1 min read

Vue Tip: When to Use Render Function

Vue Tip: When to Use Render Function Image

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:

Vue Documentation

Vue recommends using templates to build applications in the vast majority of cases. However, there are situations where we need the full programmatic power of JavaScript. That's where we can use the render function.

Code Examples

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

Example.vue
1<template>
2  <div class="wrapper">
3    <p class="any-class">Lorem Ipsum</p>
4  </div>
5</template>

And this would be the equivalent using render function:

Example.vue
1<script setup>
2import { h } from 'vue'
3
4const render = h(
5  'div', // type
6  { class: 'wrapper' }, // props
7  [h('div', { class: 'any-class', innerHTML: 'Lorem Ipsum' }, [])] // children
8)
9</script>
10
11<template>
12  <render />
13</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.

If you liked this Vue tip, follow me on X to get notified about new tips, blog posts, and more. Alternatively (or additionally), you can subscribe to my weekly Vue & Nuxt newsletter:

I will never share any of your personal data. You can unsubscribe at any time.