Can I pass an "inline-template" component into another "inline-template" component?

Question

My thinking is that this isn't possible, or there is an extra step I am missing. Either way, I'm stuck and can't figure this out.

Reasons to use inline-templates are the ability to use Laravel Blade syntax and combine the powers of Vue Js. Seems like the best of both. A basic breakdown of structure to explain the issue:

<nav-container inline-template >
    //content

    //import this component into the party!
    <nav-topics></nav-topics>

</nav-container>

<nav-topics inline-template>
    //content
</nav-topics>

I get the console error:

Failed to mount component: template or render function not defined.

I know the component "nav-topics" is working without being an inline-template, because if I change it to a normal component which is not inline, then the content will be brought in. I have it set up in "nav-container" to "import .. from" and set the component name, as I said I can get it working without it being an inline version!

Surely you can't just have the parent's only set as "inline-template" components and not their children?

It kind of works if I use the Blade file import in the "nav-container" file, but this doesn't function correctly. I can't emit an event or the usual communication between components.

@include('nav/_nav_topics')

Answer 1

They nest just fine, as long as the outer one knows about the inner one, and you have some template (either inline or in the component spec) associated with each one.

An inline-template simply overrides the spec template for the one instance it is supplied to. You can have different inline-templates for the same component in multiple places if you want.

Vue.component('dooDad', {});
Vue.component('thingAmajig', {template: '<div>Fooey</div>'});
new Vue({
  el: '#app'
});

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<div id="app">
  <doo-dad inline-template>
    <div>
      There's a thing-amajig here.
      <thing-amajig inline-template>
        <div>That's me</div>
      </thing-amajig>
      <thing-amajig></thing-amajig>
    </div>
  </doo-dad>
</div>