Creating and initializing your component

Vue components are registered using the Vue.component(tagName, options) syntax. Each component must have an associated tag name. The Vue.component registration must happen before you initialize your Vue instance. As a minimum, each component should have a template property—denoting what should be displayed when the component is used. Templates must always have a single wrapping element; this is so the custom HTML tag can be replaced with the parent container.

For example, you couldn't have the following as your template:

      <p>Hello</p><p>Goodbye</p>

If you do pass a template of this format, Vue will throw an error in the browser's JavaScript console warning you.

Create a Vue component yourself, with a simple fixed template:

      Vue.component('my-component', {
        template: '<p>hello</p>'
      });
 
      const app = new Vue({
        el: '#app',

       // App options
      });

With this component declared, it would now give us a <my-component></my-component> HTML tag to use in our view.

You can also specify components on the Vue instance itself. This would be used if you had multiple Vue instances on one site and wished to contain a component to one instance. To do this, create your component as a simple object and assign the tagName within the components object of your Vue instance:

      let Child = {
        template: '<p>hello</p>'
      }

      const app = new Vue({
        el: '#app',

        // App options

        components: {
          'my-component': Child
        }
      });

For our app though, we are going to stick with the Vue.component() method of initializing our components.