title: Registering vue components globally
body: <p>I have a vue app that I created using the vue-cli</p>
  
  <p>Im creating some components and I want to use them like this:</p>
  
  <pre><code>&lt;template&gt;
      &lt;oi-list&gt;
          &lt;oi-list-header&gt;Task ID&lt;/oi-list-header&gt;
          &lt;oi-list-header&gt;Tasks Title&lt;/oi-list-header&gt; 
          &lt;oi-list-header&gt;Task Status&lt;/oi-list-header&gt; 
          &lt;div v-for="task in tasks"&gt;
              &lt;oi-list-item&gt;{{ task.id }}&lt;/oi-list-item&gt;
              &lt;oi-list-item&gt;{{ task.title }}&lt;/oi-list-item&gt;
              &lt;oi-list-item&gt;{{ task.status }}&lt;/oi-list-item&gt;
          &lt;/div&gt;
      &lt;/oi-list&gt;
  &lt;/tempalte&gt;
  </code></pre>
  
  <p>The probelm I have is where ever I use the list component I have to write the following:</p>
  
  <pre><code>&lt;script&gt;
      import List from '@/components/List'
      import ListHeader from '@/components/ListHeader'
      import ListItem from '@/components/ListItem'
  
      export default {
      name: "Tasks",
      components: {
          'oi-list': List,
          'oi-list-header': ListHeader,
          'oi-list-item': ListItem
      }
  &lt;script&gt;
  </code></pre>
  
  <p>What I would like is for reusable components to either be registered globally so i dont have to import them and their sub components every time i want to use them, or some how have them load dynamically when I use them. Is this possible?</p>
  
  <p>I have used <a href="https://vuetifyjs.com/en/" rel="noreferrer">Vuetify</a> in the past and that doesn't require you to import each component in order to use it.</p>
  
  <p>Please can someone point me in the right direction? Thanks.</p>