How to do transclusion in vue.js?

Question

I'm trying to make a bootstrap modal component with the awesome vue.js, but I haven't been able to find a good way to transclude- that is, I want to bundle several nested elements containing the backdrop, modal window, close button, etc. into one component. This component will then need to wrap the markup placed inside of it.

The component

<div class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">

    // transcluded content goes here.

    </div>
  </div>
</div>

The content

<bs-modal>
  <h1>Some title lol</h1>
  <p>The content 'n stuff</h1>
</bs-modal>

Transcluded

<div class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">

      <h1>Some title lol</h1>
      <p>The content 'n stuff</h1>

    </div>
  </div>
</div>

Answer 1

Ah, found it.

http://vuejs.org/guide/components.html#Content_Distribution_with_Slots You use a special <slot></slot> element to indicate where to transclude.

So,

<div class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">

    <slot></slot>

    </div>
  </div>
</div>