Render functions vs templates decision in Vue

Introduction

Render functions and templates both create the HTML you see on the page. Choosing between them helps you write clearer and easier-to-manage Vue components.

When you want simple and easy-to-read HTML structure, use templates.

When you need more control or dynamic logic in your HTML, use render functions.

When you want to write your component entirely in JavaScript, use render functions.

When you prefer a clear separation of HTML and JavaScript, use templates.

When you want to use JSX syntax inside Vue, use render functions.

Syntax

Vue

Template syntax:
<template>
  <div>Hello, {{ name }}!</div>
</template>

Render function syntax:
import { h } from 'vue'
export default {
  render() {
    return h('div', `Hello, ${this.name}!`)
  }
}

Templates look like regular HTML with special Vue tags.

Render functions use JavaScript to create HTML elements.

Examples

This template example shows a button that updates a counter when clicked.

Vue

<template>
  <button @click="count++">Clicked {{ count }} times</button>
</template>

<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>

This render function example does the same as the template but uses JavaScript to create the button.

Vue

import { h, ref } from 'vue'

export default {
  setup() {
    const count = ref(0)
    return { count }
  },
  render() {
    return h('button', { onClick: () => this.count++ }, `Clicked ${this.count} times`)
  }
}

Sample Program

This simple Vue component uses a template to greet the user by name.

Vue

<template>
  <div>
    <p>Template says: Hello, {{ name }}!</p>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const name = ref('Friend')
</script>

Important Notes

Templates are easier for beginners because they look like HTML.

Render functions give more power but need more JavaScript knowledge.

You can mix both in Vue, but usually pick one style per component.

Summary

Templates are simple and look like HTML.

Render functions use JavaScript for more control.

Choose based on your comfort and the complexity of your component.