title: Dynamically mount a single file component in Vue.js
body: <p>I have a single file component <strong>Main.Vue</strong>.</p>
  
  <p>I also have three other single file components <strong>A.vue</strong>, <strong>B.vue</strong> and <strong>C.vue</strong>.</p>
  
  <p>I want to be able to show inside Main.Vue a different component each time. What I did was this:</p>
  
  <pre><code>&lt;template&gt;
  &lt;div&gt;
  &lt;a v-if="isAVisible" &gt;&lt;/a&gt;
  &lt;b v-if="isBVisible" &gt;&lt;/a&gt;
  &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import A from './A.vue';
  import B from './B.vue';
  ...
  </code></pre>
  
  <p>This works but not exactly what I wanted. I wanted a different file <strong>Factory.js</strong>, which does the importing of all the components <strong>A</strong>,<strong>B</strong>,<strong>C</strong>,.. And has functions that return my component, which I can use somehow in <strong>Main.vue</strong>. Here's what I tried Factory.js to look like:</p>
  
  <pre><code>import A from './A.vue';
  import B from './B.vue';
  function getComponent(){
    if (..)
      return new A();
    else if (..)
      return new B();
    ...
  }
  </code></pre>
  
  <p>This didn't work at all.
  I want the factory file approach because:</p>
  
  <p>1) I want to split it to different factory files</p>
  
  <p>2) I want to "Attach" data to each component. So I'll have an object that contains the function returning the actual component + some additional data like "name"</p>
  
  <p>Any ideas how to do this?</p>