Categories
JavaScript Vue

Vue.js Components — Components Registration

Spread the love

Vue.js is an easy to use web app framework that we can use to develop interactive front end apps.

In this article, we’ll look at how to register Vue.js components globally and locally.

Component Registration

We can register a Vue component by using the Vue.component method.

It takes 2 arguments. The first is the name of the component as a string. The second argument is the object with various options.

The recommended name style for components with multiple words is kebab case or PascalCase.

However, only names with kebab case are valid for directly embedding in the DOM.

We can define a kebab case component as follows:

Vue.component('component-name', { /* ... */ })

A PascalCase name can be defined as follows:

Vue.component('ComponentName', { /* ... */ })

Global Registration

We register components globally with the Vue.component method. Components that are registered globally are available everywhere.

For example, we can use it as follows:

src/index.js :

Vue.component("component-a", { template: `<div>A</div>` });  
Vue.component("component-b", { template: `<div>B</div>` });
new Vue({  
  el: "#app"  
});

index.html :

<!DOCTYPE html>  
<html>  
  <head>  
    <title>App</title>  
    <meta charset="UTF-8" />  
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  
  </head> <body>  
    <div id="app">  
      <component-a></component-a>  
      <component-b></component-b>  
    </div> <script src="src/index.js"></script>  
  </body>  
</html>

Then we get A and B displayed.

The component are available, so we can nest component-a inside component-b , or component-b inside component-a or any other combination we can think of.

Local Registration

We don’t want to globally register components all the time since we don’t want to include them everywhere.

Including them globally means that the code will bloat because they’re included even though it isn’t being used.

Instead of calling Vue.component , we can define them as plain JavaScript objects and included in the components property of a component as follows:

src/index.js :

const ComponentA = { template: `<div>A</div>` };  
const ComponentB = { template: `<div>B</div>` };
new Vue({  
  el: "#app",  
  components: {  
    "component-a": ComponentA,  
    "component-b": ComponentB  
  }  
});

In the components object, “component-a” and “component-b” are the component names and ComponentA and ComponentB are the components.

index.html :

<!DOCTYPE html>  
<html>  
  <head>  
    <title>App</title>  
    <meta charset="UTF-8" />  
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  
  </head> <body>  
    <div id="app">  
      <component-a></component-a>  
      <component-b></component-b>  
    </div> <script src="src/index.js"></script>  
  </body>  
</html>

We included the components we defined in the src/index.js in the template above.

Locally registered components aren’t available in subcomponents. It’s only available in the component that it’s registered in.

If we want them to be available in other components, we have to register them again.

Using Modules

If we want to register modules locally, we can move them to their own module and export them. Then they can be imported to wherever they have to register.

For example, we can create a new file called component.js and write the following code:

src/component.js :

export const ComponentA = { template: `<div>A</div>` };  
export const ComponentB = { template: `<div>B</div>` };

Then we can import it in index.js :

import { ComponentA, ComponentB } from "./components";
new Vue({  
  el: "#app",  
  components: {  
    "component-a": ComponentA,  
    "component-b": ComponentB  
  }  
});

And index.html is kept the same as before:

<!DOCTYPE html>  
<html>  
  <head>  
    <title>App</title>  
    <meta charset="UTF-8" />  
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  
  </head> <body>  
    <div id="app">  
      <component-a></component-a>  
      <component-b></component-b>  
    </div> <script src="src/index.js"></script>  
  </body>  
</html>

We can also use export default instead of export as follows:

src/component.js :

const ComponentA = { template: `<div>A</div>` };  
export default ComponentA;

src/index.js :

import ComponentA from "./componentA";
new Vue({  
  el: "#app",  
  components: {  
    "component-a": ComponentA  
  }  
});

With default export, we can name ComponentA anything we like when we import it.

index.html :

<!DOCTYPE html>  
<html>  
  <head>  
    <title>App</title>  
    <meta charset="UTF-8" />  
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  
  </head> <body>  
    <div id="app">  
      <component-a></component-a>  
    </div> <script src="src/index.js"></script>  
  </body>  
</html>

Conclusion

In Vue.js, we can register components globally and locally. Global registration makes a module available for everything.

We can register components globally by using the Vue.component method.

Local registration only makes it available to the component it’s registered in.

Locally registered components should be used more often because they won’t be included when it’s not used in the final build.

Leave a Reply

Your email address will not be published.

If you like the content of this blog, subscribe to my email list to get exclusive articles not available to anyone else.