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

CodePudding user response：

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: A rendered container has its VNode attached as _vnode, and passing render(null, container) destroys the _vnode. This should be called as cleanup when the parent component unmounts (via unmounted lifecycle hook).

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

export default async function renderHello(container, props) {
  const HelloWorld = (await import('@/components/HelloWorld.vue')).default
  let vnode = createVNode(HelloWorld, props)
  render(vnode, container)

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

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

demo 1

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 elemenet.

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).

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

export default async function renderHello(container, props) {
  const HelloWorld = (await import('@/components/HelloWorld.vue')).default
  let app = createApp(HelloWorld, props)
  app.mount(container)

  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 } from 'vue'
import renderHello from './renderHello'

const container = ref()
let counter = 1
let destroyComp = null

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

const insertNode = async () => {
  destroyComp?.()
  destroyComp = await renderHello(container.value, { key: counter, msg: 'Message '   counter   })
}
</script>

<template>
  <button @click="insertNode">Insert node</button>
  <div ref="container"></div>
</template>