Vue 3 Append Component to the DOM: Best Practice

I would like to dynamically create a component in my Vue 3 app that I have in an SFC, and append it to the DOM. I am using <script setup> style components, which is yet another wrinkle.

This seems unnecessarily hard.

Here’s more or less what I want to do:

1. Fetch some data. Got that.
2. Make an instance of my Vue Component: Foo.vue.
3. Hand it that data as a prop.
4. Append it to the DOM where I want it.

The problem is that I can’t do <component :is=”Foo:> in the template because I don’t know where it will be until long after the template is rendered.

Is there a best practice for this? A simple example some kind soul can provide would be hugely appreciated.

I cannot make heads or tails out of the Vue docs half the time. Sorry, hate to say it, but they are pretty opaque to newbies to Vue, and make me feel dumb.

Here’s some pretend code illustrating what I want to do

import Foo from "../components/Foo.vue"

function makeAFoo(p, data){
// instantiate my Foo.vue (not sure how to do this inline), and pass it the data it needs
let foo = new Foo(data); // if only it were this simple, right?
// Append it to p (which is an HTML Element)
p.appendChild(foo)
}

Answer

Option 1: createVNode(component, props) and render(vnode, container)

Creating: Use createVNode() to create a VNode of a component definition (e.g., imported SFC from *.vue) with props, which could be passed to render() to render it on a given container element.

Destroying: Calling render(null, container) destroys the VNode attached to the container. This should be called as cleanup when the parent component unmounts (via unmounted lifecycle hook).

// renderComponent.js
import { createVNode, render } from 'vue'

export default function renderComponent({ el, component, props, appContext }) {
  let vnode = createVNode(component, props)
  vnode.appContext = { ...appContext }
  render(vnode, el)

  return () => {
    // destroy vnode
    render(null, el)
    vnode = undefined
  }
}

Caveat: This approach relies on internal methods (createVNode and render), which could be refactored or removed in a future release.

demo 1

Option 2: createApp(component, props) and app.mount(container)

Creating: Use createApp(), which returns an application instance. The instance has mount(), which can be used to render the component on a given container element.

Destroying: The application instance has unmount() to destroy the app and component instances. This should be called as cleanup when the parent component unmounts (via unmounted lifecycle hook).

// renderComponent.js
import { createApp } from 'vue'

export default function renderComponent({ el, component, props, appContext }) {
  let app = createApp(component, props)
  Object.assign(app._context, appContext) // must use Object.assign on _context
  app.mount(el)

  return () => {
    // destroy app/component
    app?.unmount()
    app = undefined
  }
}

Caveat: This approach creates an application instance for each component, which could be non-trivial overhead if there’s a need to instantiate many components simultaneously in the document.

demo 2

Example usage

<script setup>
import { ref, onUnmounted, getCurrentInstance } from 'vue'
import renderComponent from './renderComponent'

const { appContext } = getCurrentInstance()
const container = ref()
let counter = 1
let destroyComp = null

onUnmounted(() => destroyComp?.())

const insert = async () => {
  destroyComp?.()
  destroyComp = renderComponent({
    el: container.value,
    component: (await import('@/components/HelloWorld.vue')).default
    props: {
      key: counter,
      msg: 'Message ' + counter++,
    },
    appContext,
  })
}
</script>

<template>
  <button @click="insert">Insert component</button>
  <div ref="container"></div>
</template>