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
Top comments (1)
Cool, thanks!