Component nesting

As with any ui framework, you can nest components inside eachother, creating deep and complicated structures of carefully constructed state of the art markup.

Basic nesting

app.js
Parent.fig
Child.fig

The above example should be pretty explanatory. Fig looks for tags of registered components in the template, if it matches one of the components, the tag gets populated with the contents of the component's own template.

Because the cycle continues recursively downwards, be careful to not include a component within itself to prevent stack overflows!

Passing data

You can pass data into child components by attaching it to attributes of the child component tag.

app.js
Parent.fig
Child.fig

Although it is possible to pass any data as props to components, when reading data off the opts object it is required to cast Boolean and Integer with Boolean() and parseInt() in that order. This hack is required for many of pug's features to work properly, see this test for more information.

Slots

You can "slot" elements inside of a component call, which then can be accessed with the special slot tag inside the component. You can use as many slotted elements as you want to - they'll be distributed on all slot tags from top to bottom.

app.js
Main.fig
SingleSlot.fig
ManySlots.fig

Notice how the many-slots component's template only has two slots, so the third slotted element div hello! got discarded.