vuecasts.com - "Named Slots in a Nutshell" source code.

## index.html
<!DOCTYPE html>
<html>
<head>
    <title>My App</title>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.2.3/css/bulma.css">
</head>

<body>
    <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>

    <script src="https://unpkg.com/vue@2.1.3/dist/vue.js"></script>
    <script src="main.js"></script>
</body>
</html>

## main.js
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',
});