An Interest In:
Web News this Week
- March 28, 2024
- March 27, 2024
- March 26, 2024
- March 25, 2024
- March 24, 2024
- March 23, 2024
- March 22, 2024
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
functions
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
Original Link: https://dev.to/iamandrewluca/render-in-vue-16-ways-d50
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To