Vue.js 2 Cookbook

Recursive component and local registration

In our recipe, we registered the component globally. This assigns a name to the component by default. Had we registered our component locally, our application would not work. If you register your component locally, you need to manually supply a name, as in the following highlighted line of code:

var taxon = {   name: 'taxon',   template: `   <li> ...

You can then register the component normally:

new Vue({   el: '#app',   components: { taxon }, ...

If you forget to give the name to the recursive component, Vue will complain with the following error:

 vue.js:2658 [Vue warn]: Unknown custom element: <taxon> - did you register the component correctly? For recursive components, make sure to provide the ...