In Vue.js, local registration is required when the global registration seems not ideal. For example, suppose you are using a build system like Webpack and globally registering all components. In that case, even if we stop using a component, it could still be included in your final build. This unnecessarily increases the amount of JavaScript your users have to download. In these cases, it is better to define your components as plain JavaScript objects as follows:
- var ComponentA = {/*…….*/}
- var ComponentB = {/*…….*/}
- var ComponentC = {/*…….*/}
After that define the components you would like to use in a components option as follows:
- new Vue({
- el: ‘#app’,
- components: {
- ‘component-a’: ComponentA,
- ‘component-b’: ComponentA
- }
- })