Michael Hoffmann LogoMichael Hoffmann
·
1 min read

Vue Tip: When to Use Render Function

Vue Tip: When to Use Render Function Image
TemplateScript

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
<template> <div class="wrapper"> <p class="any-class">Lorem Ipsum</p> </div> </template>

And this would be the equivalent using render function:

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

Nuxt Tip: Rendering Modes

Nuxt 3 provides plenty of options for rendering. There are SSG, SSR, Universal, SPA, ISG, or mix it up per route with hybrid rendering.

Nuxt Tip: Refresh Data by Watching Sources Using useAsyncData

Nuxt 3's useAsyncData() composable can be used within your pages, components, and plugins to get access to data that resolves asynchronously. It can also be used to refresh the data loaded from the API based on the user's action. (pagination, filtering results, searching, etc.)