Component registration in Vue.js

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

First, we will see global registration

Thi is the Vue code which 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 component
If you register 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

Component template should have single root element
So following code does not work

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

Insted, 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