Javascript is required
Mokkapps LogoMichael Hoffmann

Vue Tip: When to Use Render Function

Michael Hoffmann (Mokkapps) - Senior Frontend Developer (Freelancer)
Michael Hoffmann
Mar 15, 2023
1 min read
Vue Tip: When to Use Render Function Image
New Vue & Nuxt tips delivered to your inbox:

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:

<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.

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