Introduction to Render Functions

Paul Melero

Paul Melero

Sep 28, 2021
2 min read
Share on Twitter or LinkedIn

# What is a Vue render function?

You're probably used to write Vue components in Single File Components (SFC) format:

   <div>Hello world</div>

…where you put all your HTML inside the template block.

Vue has an HTML-based template engine, and what it does is transform these templates into “render functions”.

Render functions are the JavaScript representation of a Vue template.

Just so you know, Vue compiles the previous example into something like:

function render( ) {
    return _c('div',[_v("Hello World")])

But more generally, when we talk about render functions, we talk about the way of authoring templates with the following syntax:

// Vue 2 syntax
export default {
  render(h) { // <- Render Function
    return h('div', ['hello world']) // <- This is our template

So, for components defined with render functions, there's no need to have a template block at all, because the template is defined in the render function.

To get to know this syntax better, please refer to the official docs:

# Vue 3 syntax

Now let's write the previous example with Vue 3 syntax:

// Vue 3 syntax
import { h } from 'vue'
export default {
  render() {
    return h('div', ['hello world'])

What changed is that now we need to import the h function from Vue manually. It's no longer passed as a parameter to the render function by default.

Here's a link to the Vue (3) SFC Playground to see this in action:

# Differences with regular templates

  • With render functions, performance is not increased or even degraded.
  • File size differences are marginal.
  • Readability is worse in render function components.
  • Therefore, maintainability is harder.
  • And it makes it more difficult for folks not used to JavaScript (or Vue render functions) to contribute.

So, if it makes them harder to maintain and the performance is not significantly improved, why do we want them, why do we need them? In the next article, we're going to see a few cases where render functions are actually needed and recommended. Stay tuned!

Don't miss out anything about Vue, your favourite framework.

Subscribe to receive all the articles we publish in a concise format, perfect for busy devs.

Related Articles

Run watchers when a Vue.js component is created

Tutorial on how to make a watcher run instantly when a Vue.js component is created

Alex Jover Morales

Alex Jover Morales

Mar 31, 2019

Nuxt 3 + Storyblok for a Sushi Recipes Website

Have you used Nuxt 3 with Storyblok? Learn how to build a real-world recipes website from scratch (includes a video so you can see all the process)

Alvaro Saburido Rodriguez

Alvaro Saburido Rodriguez

Dec 15, 2021

Going 3D with Trois.js and Vue 3

Learn about Trois.js, a JS library to render 3D scenes in Vue. In this article, we're learning the basics of using Trois.js in a Vite + Vue 3 app

Alvaro Saburido Rodriguez

Alvaro Saburido Rodriguez

Nov 16, 2021


VueDose is proudly supported by its sponsors. If you enjoy it, consider supporting it to ensure the project maintainability.

Learning Partner