Registering vue components globally : <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>
