Named Slots Vue

by Tuan Truong

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.2.3/css/bulma.css">
<div id="root" class="container">
        <modal>
            <template slot="header">
                My Title
            </template>

            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore cum, delectus quas possimus sint quisquam et, quam quia omnis, autem quae ipsa qui ex earum facilis sequi quidem mollitia culpa?

            <template slot="footer">
                <a class="button is-primary">Save changes</a>
                <a class="button">Cancel</a>
            </template>
        </modal>
    </div>

Vue

Vue.component('modal', {
    template: `
        <div class="modal is-active">
            <div class="modal-background"></div>
            <div class="modal-card">
                <header class="modal-card-head">
                    <p class="modal-card-title">
                        <slot name="header"></slot>
                    </p>
                    <button class="delete"></button>
                </header>
                <section class="modal-card-body">
                    <slot></slot>
                </section>
                <footer class="modal-card-foot">
                    <slot name="footer">
                        <a class="button is-primary">Okay</a>
                    </slot>
                </footer>
            </div>
        </div>
    `
})
new Vue({
    el: '#root',
});