🎄 Render in Vue, 16+ ways

In this blog post I will show you 16 ways how to render something in Vue

🚀 So let's start

Talk is cheap. Show me the code.
― Linus Torvalds

Here is full example that you can play around
https://github.com/iamandrewluca/vue-render-everywhere

🧰 Prerequisites

I'm using Vite with this configuration

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'

export default defineConfig({
  plugins: [vue(), vueJsx()],
  resolve: { alias: { vue: 'vue/dist/vue.esm-bundler.js' } }
})

When refering to a DOM element, this is the HTML for every example

<script type="text/html" id="template-in-script">
  <li>The quick brown fox...</li>
</script>

🎁 Methods to render in Vue

I'm showing these methods only for learning purposes. Use at your own risk.

Method 1: template option as string

import { defineComponent } from "vue"

export default defineComponent({
  template: '<li>The quick brown fox...</li>'
})

Method 2: template option as a selector

import { defineComponent } from "vue"

export default defineComponent({
  template: '#template-in-script'
})

Method 3: template option as a HTMLElement

import { defineComponent } from "vue"

export default defineComponent({
  template: document.querySelector('#template-in-script')
})

Method 4: using render option and h factory

import { defineComponent, h } from "vue"

export default defineComponent({
  render() {
    return h('li', 'The quick brown fox...')
  }
})

Method 5: using render option and compile function

import { compile, defineComponent } from "vue"

export default defineComponent({
  render: compile('<li>The quick brown fox...</li>')
})

Method 6: using render option and compile function with selector

import { compile, defineComponent } from "vue"

export default defineComponent({
  render: compile('#template-in-script')
})

Method 7: using render option and compile function with HTMLElement

import { compile, defineComponent, h } from "vue"

const element = document.querySelector('#template-in-script')
export default defineComponent({
  render: compile(element)
})

Method 8: using setup function and h factory

import { h, defineComponent } from "vue"

export default defineComponent({
  setup() {
    return () => h('li', 'The quick brown fox...')
  }
})

Method 9: using setup and compile function

import { defineComponent, compile } from "vue"

export default defineComponent({
  setup() {
    return compile('<li>The quick brown fox...</li>')
  }
})

Boring? 🤣 We are not done yet 🚗

Method 10: using functional component and h factory

import { h } from "vue"

export default function () {
  return h('li', 'The quick brown fox...')
}

Method 11: ⛔️ using functional component and compile function

JUST AN EXPERIMENT, DO NOT USE

import { compile } from "vue"

const compiled = compile('<li>The quick brown fox...</li>')
export default function () {
  return compiled({})
}

And here we have the method that is used by most Vue developers, Single File Component

Method 12: using SFC template tag

<template>
  <li>The quick brown fox...</li>
</template>

Method 13: using SFC without template tag

<script lang="ts">
import { defineComponent } from "vue"

export default defineComponent({
  template: "<li>The quick brown fox...</li>",
})
</script>

Actually when you use SFC with a template tag, compiler will convert the template to render function.

So basically you can use SFC without a template tag and use one of the methods above (all of them work).

But we are not done yet. We have 3 more methods.

Let me introduce you JSX 🤣

Method 14: using render option and JSX

import { defineComponent } from "vue"

export default defineComponent({
  render() {
    return <li>The quick brown fox...</li>
  },
})

Method 15: using setup function and JSX

import { defineComponent } from "vue"

export default defineComponent({
  setup() {
    return () => <li>The quick brown fox...</li>
  },
})

Method 16: using functional component and JSX

export default function () {
  return <li>The quick brown fox...</li>
}

Does last one look familiar? 👀 Hello to React friends!
Yes a functional component with JSX in Vue looks identical with React function component.

Here is full example that you can play around
https://github.com/iamandrewluca/vue-render-everywhere

That's all for today. Thanks for reading my blog posts!
Never stop learning. Bye! 👋

Cover Photo by Joshua Eckstein on Unsplash

Comments

[David Ivkovic]

Cool, thanks!