Nested components in Vue.js

Question

I struggle in creating nested components where each layer includes templates:

<wizard>
    <step name="first">Do this step first!</step>
    <step name="second">This should follow</step>
</wizard>

(full example: http://jsfiddle.net/maxhq/9o4qxd7t/ )

I only get templates to work either for parent or for child components, never for both.

• if parent has no template and is used with <... inline-template> , child components (and their templates) are evaluated (like in http://jsfiddle.net/hajkrupo/3/ )
• if parent includes a template (even with special tag <content> ), then the child components do not get inserted/evaluated

Can this be solved in vue.js?

Answer 1

If you're using the latest vue.js version (1.0.26 at the time of writing) your problem is using <content></content> as the syntax was changed to <slot></slot>

JSFiddle

Answer 2

No. inline-template means you define template inline there there:

When this param is present, the component will use its inner content as its template rather than transclusion content. This allows more flexible template-authoring.

You can do it this way: http://jsfiddle.net/8k335nrf/