Why render functions exist in Vue

Introduction

Render functions let you create Vue components using JavaScript instead of templates. They give you more control and flexibility when building your UI.

When you need to create dynamic elements that are hard to express in templates.

When you want to use JavaScript logic directly to build your component's output.

When you want to avoid template compilation for performance reasons.

When you want to create reusable UI parts programmatically.

When you need to manipulate the virtual DOM directly for advanced use cases.

Syntax

Vue

export default {
  render() {
    return h('tag', { props }, children)
  }
}

The render function returns virtual DOM nodes created with h().

You write JavaScript inside render() instead of using template HTML.

Examples

Simple render function returning a div with text.

Vue

export default {
  render() {
    return h('div', 'Hello world')
  }
}

Render function with a button that shows an alert when clicked.

Vue

export default {
  render() {
    return h('button', { onClick: () => alert('Clicked!') }, 'Click me')
  }
}

Sample Program

This Vue component uses a render function to create a section with a heading and paragraph. It shows how you can build nested elements with JavaScript.

Vue

import { h, defineComponent } from 'vue'

export default defineComponent({
  render() {
    return h('section', { style: { padding: '1rem', border: '1px solid #ccc' } }, [
      h('h1', 'Welcome'),
      h('p', 'This is rendered using a render function.')
    ])
  }
})

Important Notes

Render functions are more flexible but can be harder to read than templates.

Use render functions when templates are not enough for your UI needs.

Vue's h() helper creates virtual DOM nodes inside render functions.

Summary

Render functions let you build Vue components with JavaScript instead of templates.

They are useful for dynamic or complex UI that templates can't easily express.

Use h() to create elements inside the render function.