title: Vue 3 use dynamic component with dynamic imports
body: <p>I use Vue 3 and I have a dynamic component. It takes a prop called <code>componentName</code> so I can send any component to it. It works, kind of.</p>
  <h3>Part of the template</h3>
  <pre class="lang-html prettyprint-override"><code>&lt;component :is=&quot;componentName&quot; /&gt;
  </code></pre>
  <p>The problem is that I still need to import all the possible components. If I send <code>About</code> as a <code>componentName</code> I need to import <code>About.vue</code>.</p>
  <h3>Part of the script</h3>
  <p>I import all the possible components that can be added into <code>componentName</code>. With 30 possible components, it will be a long list.</p>
  <pre class="lang-js prettyprint-override"><code>import About &quot;@/components/About.vue&quot;;
  import Projects from &quot;@/components/Projects.vue&quot;;
  </code></pre>
  <h2>Question</h2>
  <p>It there a way to dynamically import the component used?</p>