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.
