Complete Vue.js 2 Web Development_ Practical guide to building end-to-end web development solutions with Vue.js 2

Optimizing your App and Using Components to Display Data Chapter 3

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: '<div>hello</div>' }

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.

Using your component

In your view, add your custom HTML element component:

<div id="app"> <my-component></my-component> </div>

Viewing this in the browser should replace the HTML tag with a

and a hello message.

There may be some cases where a custom HTML tag won't be parsed and accepted - these

cases tend to be in

,