Name Casing in Component Registration
A component's name can be defined in one of two ways:
1) Using a kebab-case
Vue.component('component-name', {/*... */})
You can only use <component-name> to refer to the component in this scenario.
2) Using a PascalCase
When we define a component in PaschalCase, we do so as follows:
Vue.component('ComponentName', {/*... */})
To refer to the component, we can use either <component-name> (as in kebab-case) or <ComponentName>. Only kebab-case names, however, are immediately valid in the DOM.
Global Registration
Creating components with Vue.component registers them globally, allowing us to use them in any Vue instance (new Vue) produced after the registration:
JS file (src/index.js):
Vue.component('component-a', { template: `<div>Component A</div>`});
Vue.component('component-b', { template: `<div>Component B</div>`});
Vue.component('component-c', { template: `<div>Component C</div>`});
new Vue({ el: '#app' })
You can also try this code with Online Javascript Compiler
HTML file (index.html):
<!DOCTYPE html>
<html>
<head>
<title>Application</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>
<component-c></component-c>
</div>
<script src="src/index.js"></script>
</body>
</html>
Output
Using Local Registration
In most circumstances, global registration isn't the best option. Whenever using a build system like webpack, globally registering all components means that even if we stop using a component, it may still be present in the final build. The user will have to download more JavaScript as a result of this. You can declare your components as plain and straightforward JavaScript objects in these cases:
var ComponentA = { template: `<div>Component A</div>` }
var ComponentB = { template: `<div>Component B</div>` }
var ComponentC = { template: `<div>Component C</div>` }
You can also try this code with Online Javascript Compiler
Then, using the components option, select the component you want to use:
new Vue({
el: '#app',
components: {
'component-a': ComponentA,
'component-b': ComponentB,
'component-c': ComponentC
}
});
You can also try this code with Online Javascript Compiler
The console.log includes the same as the above output(i.e., as in global registration).
The custom element name will be the key for every property in the components object, while the value will be the options object for that component.
The components defined in 'src/index.js' were included in the template above.
Subcomponents do not have access to locally registered components. It can only be used in the component where it is registered. We must re-register them if we want them to be available in other components.
When the components are registered globally, they can be utilized in each new Vue instance template produced after registration. This sentence holds true for all subcomponents, implying that all three components(Component A, Component B and Component C) will be accessible from within each other.
Using Local Registration in a Module System
It is highly suggested that one should construct a components directory in which each component is contained within its own file.
Then, as needed, each of those components can be imported before being registered in the new .vue or .js file(Here, the component A and component C are being used inside the component B file ):
import ComponentA from './ComponentA'
import ComponentC from './ComponentC'
export default {
components: {
ComponentA,
ComponentC
},
// ...
}
You can also try this code with Online Javascript Compiler
When the components are generic, they may wrap single elements such as a button or an input. And these also might be reusable base components. As a result, we may end up with a long list of base components that are used in a variety of components:
import BaseButton from './BaseButton.vue'
import BaseIcon from './BaseIcon.vue'
import BaseInput from './BaseInput.vue'
export default {
components: {
BaseButton,
BaseIcon,
BaseInput
}
}
You can also try this code with Online Javascript Compiler
And these may only allow for a little bit of markup in a template:
<BaseInput
v-model="searchText"
@keydown.enter="search"
/>
<BaseButton @click="search">
<BaseIcon name="search"/>
</BaseButton>
If we use Webpack (or Vue CLI 3+), we can use require.context, which will globally register only the common base components in the application's entry file (e.g., js/app.js):
import Vue from 'vue'
import upperFirst from 'lodash/upperFirst'
import camelCase from 'lodash/camelCase'
const requireComponent = require.context(
// To find the relative path of the components folder
'./components',
// To look in the subfolders
false,
// The regular expression used to match the base component filenames
/Base[A-Z]\w+\.(vue|js)$/
)
requireComponent.keys().forEach(fileName => {
// To get the component config
const componentConfig = requireComponent(fileName)
// To get the PascalCase name of the component
const componentName = upperFirst(
camelCase(
// To retrieve the file name regardless of folder depth
fileName
.split('/')
.pop()
.replace(/\.\w+$/, '')
)
)
// To register the component globally
Vue.component(
componentName,
/*
To look up component options on `.default`, this will
exist if component was exported with `export default`,
if not, it will fall back to the module's root.
*/
componentConfig.default || componentConfig
)
})
You can also try this code with Online Javascript Compiler
Frequently Asked Questions
1. What are the components in Vue.js?
Ans: Components are a method to develop Vue.js code that is modular and reusable. Components are custom HTML elements that can be used by the primary Vue instance as well as other components. They're also known as sub-Vue instances or mini-Vue instances.
2. Can the Vue components have methods?
Ans: Yes, components accept the same parameters as new Vue instances, such as data, computed, watch, methods, and lifecycle hooks, because they are reusable Vue instances. Only a few root-specific options, such as el, are exceptions.
3. Why do you need to register locally?
Ans: We need to use local registration as even if we don't utilize the component, it may still be included in our final build due to global registration. As a result, the application will generate unnecessary javascript. This can be avoided by registering locally.
4. When is global registration preferred?
Ans: When components have been registered via the global registration method, they can be utilized in each new Vue instance template produced after registration. Here global registration is preferred as it makes the components available globally in our application.
They are generally preferred when there are certain components that we know will be used everywhere in the application. However, it is not an ideal solution, due to which it is advised to use local registration.
Key Takeaways
In this blog, we have learned the concepts of component registration in Vue.js. We came to know that we can do component registration in Vue.js both globally and locally. When a module is registered globally, it becomes available to everyone.
Using the Vue.component function, we can register components globally. Only the component in which it is registered locally has access to it. Local component registration in Vue.js should be used more frequently because they won't be included if they aren't used in the final build.
Enroll in our Full Stack Web Development Course — MERN Stack to deeply understand the concept of component registration in Vue.js of Web Development.
Credits: GIPHY
Happy Developing!
426+ registered 
