title: Vue 3 Append Component to the DOM: Best Practice
body: <p>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 <code>&lt;script setup&gt;</code> style components, which is yet another wrinkle.</p>
  <p>This seems unnecessarily hard.</p>
  <p>Here's more or less what I want to do:</p>
  <ol>
  <li>Fetch some data. Got that.</li>
  <li>Make an instance of my Vue Component: Foo.vue.</li>
  <li>Hand it that data as a prop.</li>
  <li>Append it to the DOM where I want it.</li>
  </ol>
  <p>The problem is that I can't do &lt;component :is=&quot;Foo:&gt; in the template because I don't know where it will be until long after the template is rendered.</p>
  <p>Is there a best practice for this? A simple example some kind soul can provide would be hugely appreciated.</p>
  <p>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.</p>
  <p>Here's some pretend code illustrating what I want to do</p>
  <pre><code>import Foo from &quot;../components/Foo.vue&quot;
  
  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)
  }
  </code></pre>