Component registration in Vue.js

Last Updated: July 30, 2021

You can register components in Vue.js in two ways
1 Global registration
2 Local registration

First, we will see global registration

 




This is the Vue code that creates the global component with the template

Vue.component('my-address', {
        template: "
23 Cross Lane
"
})

new Vue({
      el: "#root",
      data: {
         
      }
})

Then let us see the local registration of the component
If you register a component locally then it is available for that instance or component. You can use the component instance option of Vue

    var LocalAddress={template:'
Local Address
'} 

    new Vue({
      el: "#root",
      data: {
         
      },
      components :{
        'local-address' : LocalAddress
      }
    })

Now you can render the component in your HTML

 




The component template should have a single root element
So following code does not work

var LocalAddress={template:'
Local Address
Line 2
'} 

Instead, you can use the following code

var LocalAddress={template:'
Local Address
Line 2
'} 

You can reformat the above code with backslash to improve the redability

var LocalAddress={template:'
\
Local Address
\
NC
\
'} 

Component should have its own data property