Vue Component Exercise: Bulma Modal Component

As a next exercise let’s convert the Bulma Modal component into Vue Component.

This is how the code snippet of Bulma Modal component looks like

<div class="modal is-active">
  <div class="modal-background"></div>
  <div class="modal-content">
    <!-- Any other Bulma elements you want -->
  </div>
  <button class="modal-close is-large" aria-label="close"></button>
</div>

is-active class on the modal displays the modal.

To simplify this a bit complex markup, Let’s convert this into a Vue component, so that we can define our modal with something as simple as <modal><!-- Modal Content -> </modal>

Vue.component('modal',{
            template: `<div class="modal is-active">
                <div class="modal-background"></div>
                <div class="modal-content">
                    <div class="box">
                        <slot></slot>
                     </div>
                </div>
                <button class="modal-close is-large" aria-label="close" @click="$emit('close')"></button>
                </div>`,
        });

        let app = new Vue({
            el: '#root',

            data:{
                showModal: false,
            }
        });

We have defined the template of our vue component as the markup of bulma modal. Notice that we have is-active class in there by default. That means we will handle the opening and closing of modal via Vue.

We have defined a new data property showModal which is false by default.

In your HTML you can define your modal and a button to show the modal like below.

<div id="root">
            <modal v-if="showModal" @close="showModal = false">
                <p> Custom Message for the Modal</p>
            </modal>

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

Notice that to handle the close action we are making use of Vue event. On the click action on bulma modal close button we emit an close event, and we are listening for the event on the Modal to change the showModal property to false.

Code:

https://github.com/tushargugnani/vue-examples/blob/master/bulma-modal.html

Working Demo:

https://tushargugnani.github.io/vue-examples/bulma-modal.html