As you surely remember from the previous chapters, components are special parts of the Vue application that have their own scope of data and methods. Components can be used and reused throughout the application. In the previous chapter, you learned that a component is created by using the Vue.extend({...}) method and registered using the Vue.component() syntax. So, in order to create and use a component, we would write the following JavaScript code:
//creating component
var HelloComponent = Vue.extend({
template: '<h1>Hello</h1>'
});
//registering component
Vue.component('hello-component', HelloComponent);
//initializing the Vue application
new Vue({
el: '#app'
});
Then, we will use hello-component inside the HTML:
<div id='app'> <hello-component></hello-component> </div>