Reference one locally defined vue2 component from another

Question

I am trying to set up a reference from one locally defined vue2 Component to another like so:

new Vue({
  el: '#app',
  components: {
    'foo': {template: '<p>Foo</p>'},
    'bar': {template: '<foo />'}
  }
});

When trying to render <foo> (see this jsfiddle), Vue (Vue 2.2.1) emits a warning that:

[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

I have tried to include the name option for component foo, as suggested by the warning and the section on recursive components in the guide, but this makes no difference.

Everything works fine if I register the components globally (jsfiddle):

Vue.component('foo', {template: '<p>Foo</p>'});
Vue.component('bar', {template: '<foo />'});

new Vue({
  el: '#app'
});

Is there a simple way to make the local definitions work, or should I just proceed with globally defined components?

Roy J Roy J · Accepted Answer · 2018-03-14T20:43:25

bar doesn't know about foo. You have defined things so that your main Vue instance knows about both of them, but it doesn't use foo, bar does. You need to define foo as a component of bar:

new Vue({
  el: '#app',
  components: {
    'bar': {
      template: '<foo></foo>',
      components: {
        'foo': {
          template: '<p>Foo</p>'
        }
      }
    }
  }
});

<script src="//unpkg.com/vue@latest/dist/vue.js"></script>
<div id="app">
  <bar></bar>
</div>


Vue no longer emits this warning when trying to instantiate "bar":
<code><pre>
[Vue warn]: Unknown custom element: &lt;foo&gt; - did you register the component correctly?
For recursive components, make sure to provide the "name" option.
</pre></code>

Reference one locally defined vue2 component from another

1 Answers