Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
November 23, 2021 10:16 pm GMT

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>')  }})

Image description

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

hello fellow kids

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.

boy and girl meme

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

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To