Add a Dialog Box to a Vue App with the vue-js-modal Library
Tags: vue, javascript, webdev, programming
Published: 2021-01-20 03:06:30

**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.