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?

I believe that this is your problem http://vuejs.org/guide/components.html#Content_Insertion: "transcluded contents are compiled in the parent component’s scope, not in the child’s scope". — mauricius
– mauricius, Commented Aug 28, 2015 at 11:19

Justin MacArthur · Accepted Answer · 2016-08-29 19:50:36Z

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

answered Aug 29, 2016 at 19:50

Justin MacArthur

4,05024 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Razi91 · Accepted Answer · 2015-08-27 16:30:43Z

0

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/

answered Aug 27, 2015 at 16:30

Razi91

1012 silver badges5 bronze badges

1 Comment

MaxHQ Over a year ago

It can't be solved? That makes me weep a bit :-( I know I can write it the way you showed, but then the markup that I like to see as internal to the component has to be exposed to the "outside" world.

Collectives™ on Stack Overflow

Nested components in Vue.js

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related