vue loader modals

29 June 2017

Vue's example modal component is pretty good, but what if we're using vue-loader and want the same functionality? This is my solution.

Create a new component, Modal.vue. The template section is slightly different than the example template in that it has to contain the button trigger. So create a container div with the button in it:

<div>
    <button @click="showModal = true">Show</button>
</div>

Then after the button insert the example's template:

<div>
    <button @click="showModal = true">Show</button>
    <transition name="modal">
        <div class="modal-mask">
            <div class="modal-wrapper">
                <div class="modal-container">

                    <div class="modal-header">
                        <slot name="header">
                            default header
                        </slot>
                    </div>

                    <div class="modal-body">
                        <slot name="body">
                            default body
                        </slot>
                    </div>

                    <div class="modal-footer">
                        <slot name="footer">
                            default footer
                            <button class="modal-default-button" @click="$emit('close')">
                                OK
                            </button>
                        </slot>
                    </div>
                </div>
            </div>
        </div>
    </transition>
</div>

Since we don't want the modal to show right away, modify the opening modal-mask div:

<div class="modal-mask" v-if="showModal">

We then need to change the close button's @click behaviour:

<button class="modal-default-button" @click="showModal = false">

In the script section we need to define the showModal property:

export default {
    data: function() {
        return {
            showModal: false
        }
    },
}

Finally, in the style section paste the styles from the example css tab. See the final code here.