Add a Dialog Box to a Vue App with the vue-js-modal Library

Check out my books on Amazon at https://www.amazon.com/John-Au-Yeung/e/B08FT5NT62

Subscribe to my email list now at http://jauyeung.net/subscribe/

The Vue.js modal library is a popular and useful modal library for Vue apps.

In this article, we’ll look at how to add a modal with the vue-js-modal library.

Dialogs

Dialogs are a simplified version of the modal which has most parameters set by default.

It’s useful for quick prototyping and showing alerts.

We can set the dialog to true when we call Vue.use to show the dialog.

For example, we can write:

main.js

import Vue from "vue";
import App from "./App.vue";
import VModal from "vue-js-modal";
Vue.use(VModal, {
  dialog: true
});

Vue.config.productionTip = false;

new Vue({
  render: (h) => h(App)
}).$mount("#app");

App.vue

<template>
  <div>
    <v-dialog/>
  </div>
</template>
<script>
export default {
  name: "App",
  methods: {
    show() {
      this.$modal.show("dialog", {
        title: "Dialog title",
        text: "Lorem ipsum dolor sit amet.",
        buttons: [
          {
            title: "Cancel",
            handler: () => {
              this.$modal.hide("dialog");
            }
          },
          {
            title: "Like",
            handler: () => {
              alert("Like action");
            }
          },
          {
            title: "OK",
            handler: () => {
              alert("success");
            }
          }
        ]
      });
    }
  },
  mounted() {
    this.show();
  }
};
</script>

We register the plugin with an object with the dialog property to true .

Then in the show method, we add the this.$modal.show method to show the dialog.

The first argument has the name of the dialog.

The object in the 2nd argument has various options we can set as the dialog.

The title has the dialog title.

The text has the text.

The buttons property has an array with the button options.

They are defined by objects. title has the button text.

handler has the event handler that’s run when clicking the button.

this.$modal.hide lets us hide the modal. We reference the dialog to close we reference the name of the dialog.

Events

The modal emits various events. To listen to them, we can write:

<template>
  <modal name="example" @before-open="beforeOpen" @before-close="beforeClose">
    <span>Hello, {{ name }}!</span>
  </modal>
</template>
<script>
export default {
  name: "Example",
  data() {
    return {
      name: "world"
    };
  },
  methods: {
    beforeOpen(event) {
      console.log("Opening...");
    },
    beforeClose(event) {
      console.log("Closing...");
      if (Math.random() < 0.5) {
        event.cancel();
      }
    }
  },
  mounted() {
    this.$modal.show("example");
  }
};
</script>

We listen to the before-open and before-close events emitted from the modal component.

before-open is emitted when the modal is opening.

before-close is emitted when the modal is closing.

The event parameter is an object with the cancel method that we can use to cancel the action.

Since we call event.cancel in the beforeClose method, it’ll cancel the close modal close action.

Slots

The modal component has a slot that we can populate with our own content.

For example, we can write:

<template>
  <modal name="example">
    <div slot="top-right">
      <button @click="$modal.hide('example')">❌</button>
    </div>Hello, ☀️!
  </modal>
</template>
<script>
export default {
  name: "App",
  mounted() {
    this.$modal.show("example");
  }
};
</script>

The top-right slot adds content to the top right of the modal.

The default slot has the main modal content.

Conclusion

We can add dialog boxes easily and customize its content with the vue-js-modal library.