title: VueJS - How to import sub-components only once in parent component
body: <p>Let's say I have an <code>App.vue</code> file with the following</p>
  
  <pre><code>&lt;template&gt;
      &lt;task-list&gt;
          &lt;task&gt;Task 1&lt;/task&gt;
          &lt;task&gt;Task 2&lt;/task&gt;
      &lt;/task-list&gt;
  &lt;/template&gt;
  &lt;script&gt;
  import TaskList from './tasklist.vue'
  export default {
      //...
      components: {
          TaskList
      }
      //...
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>a <code>TaskList.vue</code> </p>
  
  <pre><code>&lt;template&gt;
      &lt;ul&gt;
          &lt;slot&gt;&lt;/slot&gt;
      &lt;/ul&gt;
  &lt;/template&gt;
  &lt;script&gt;
  import Task from './task.vue'
  export default {
      //...
      name: 'task-list'
      components: {
          Task
      }
      //...
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>a <code>Task.vue</code></p>
  
  <pre><code>&lt;template&gt;
      &lt;li&gt;&lt;slot&gt;&lt;/slot&gt;&lt;/li&gt;
  &lt;/template&gt;
  &lt;script&gt;
  export default {
      name: 'task',
      //...
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>and a <code>main.js</code></p>
  
  <pre><code>import App from './App.vue'
  
  new Vue({
    el: '#app',
    render: h =&gt; h(App)
  })
  </code></pre>
  
  <p>How do I import the sub-component <code>Task.vue</code> only once in <code>TaskList.vue</code> without also having to import it again in <code>App.vue</code></p>
  
  <p>It seems that if I do it this way, I get an error back from VueJS complaining about unregistered components</p>
  
  <blockquote>
    <p>[Vue warn]: Unknown custom element:  - did you register the
    component correctly? For recursive components, make sure to provide
    the "name" option.</p>
    
    <p>found in</p>
    
    <p>--->  at src/App.vue
           </p>
  </blockquote>
  
  <p>Is there a way to indicate that <code>task</code> is a sub-component of <code>task-list</code> without global registration or importing again in <code>App.vue</code>?</p>