Global vs Local Component Registration in VueJS

There are two ways to register a component, Globally and Locally.

So far in all the examples, we have registered the components globally using Vue.component method. Global registration makes the component globally available in our application. However, Global registration often is not ideal.

If you are using a build system like webpack ( we'll introduce this later in this course ), when the final javascript is built for your application even if you are not using the Component it will be included in the final javascript file and it will be an unnecessary overhead for the users since they have download a large JS file every time they use your application.

Additionally, for some Components, it does now make sense to have them registered globally since they will only be used for a particular parent component. Let's understand this by an example.

Global Registration

Let's say you are working on an application where you are supposed to show a list of tasks. We have registered two components globally for this use case.

    Vue.component('task-list', {
            template: `<div class="task-list">
                        <h3>List Of Tasks</h3>
                        <ul>
                            <task v-for="task in tasks">{{task}}</task>
                        </ul>
                       </div>`,
            data(){
                return{
                    tasks : ['Go to Market', 'Pick Up Kids', 'Bring Milk', 'Clean Garage']
                }
            }
    });

    Vue.component('task',{
        template: `<li><slot></slot></li>`
    });

    let app = new Vue({
        el: '#app'
    });

Here we have registered two components using Vue.component method and they both are registered globally. This means that they can be used inside the template of any root Vue instance ( new Vue ). In this case, you can use these components in your HTML markup like this.

<div id="app">
     <task-list></task-list>
     <task></task>
</div>

Do note that we can use both task-list and task in our markup since they both are globally registered.

Global Registration

Since Global registration isn't ideal in this case, We can do local registration by defining components as plain javascript objects.

let taskComponent = {
            template: `<li><slot></slot></li>`
    };

    let taskListComponent = {
            template: `<div class="task-list">
                        <h3>List Of Tasks</h3>
                        <ul>
                            <task v-for="task in tasks">{{task}}</task>
                        </ul>
                       </div>`,
            
            components: {
                'task' : taskComponent
            },
        
            data(){
                return{
                    tasks : ['Go to Market', 'Pick Up Kids', 'Bring Milk', 'Clean Garage']
                }
            }
    };


    let app = new Vue({
        el: '#app',

        components: {
            'task-list' : taskListComponent
        }
    });

Note that we defined the components in plain objects and assigned them to variables.
Inside the options object, we have a new property named componets.

   components: {
                'task' : taskComponent
            },

Since the task component is only going to used inside the context of taskListComponent, we have defined it inside it.

Similarly, tasklistComponent is defined inside the root instance.

That's all about Global and Local Registration in VueJS.

Comments