🎄 Render in Vue, 16+ ways

Vue gives you a surprising number of ways to put something on the screen. I counted at least sixteen, from the template everyone knows to some you’ve probably never thought of, and put them all in one repository you can play with.

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! 👋