🎄 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/unrevised6419/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/unrevised6419/vue-render-everywhere

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