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

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

### Installation

We can install the library by running:

```
npm i vue-js-modal
```

or

```
yarn add vue-js-modal
```

### Add a Modal

Once we install the modal, then we can use it by writing:

`main.js`

```
import Vue from "vue";
import App from "./App.vue";
import VModal from "vue-js-modal";
Vue.use(VModal);

Vue.config.productionTip = false;

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

`App.vue`

```
<template>
  <modal name="hello-world-modal">hello world modal</modal>
</template>

<script>
export default {
  name: "App",
  methods: {
    show() {
      this.$modal.show("hello-world-modal");
    },
    hide() {
      this.$modal.hide("hello-world-modal");
    }
  },
  mounted() {
    this.show();
  }
};
</script>
```

We add the `modal` component with the `name` prop so that we can assign the name to it.

This way, we can show and hide the modal.

Also, we can create dynamic modals by call the `this.$modal.show` method with a component.

For example, we can write:

`components/ModalContent.vue`

```
<template>
  <div>{{text}}</div>
</template>

<script>
export default {
  name: "ModalContent",
  props: {
    text: String
  }
};
</script>
```

`App.vue`

```
<template>
  <div></div>
</template>

<script>
import ModalContent from "./components/ModalContent.vue";
export default {
  name: "App",
  methods: {
    show() {
      this.$modal.show(
        ModalContent,
        { text: "hello world" },
        { draggable: true }
      );
    }
  },
  mounted() {
    this.show();
  }
};
</script>
```

We call the `show` method with the component as the first argument.

The 2nd argument is an object with the props.

The last argument has the options for the modal.

The `draggable` property makes the modal draggable if it’s `true` .

We can also pass in a component that’s defined inline instead of importing it:

```
<template>
  <div></div>
</template>
<script>
export default {
  name: "App",
  methods: {
    show() {
      this.$modal.show(
        {
          template: `
            <div>
              <p>{{ text }}</p>
            </div>
          `,
          props: ["text"]
        },
        { text: "hello world" },
        { draggable: true },
        { "before-close": event => console.log("before close") }
      );
    }
  },
  mounted() {
    this.show();
  }
};
</script>
```

We added a 4th argument to listen to the `before-close` event emitted by the modal before it’s closed.

Also, we can set the options globally when we register the plugin.

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, {
  dynamicDefaults: {
    draggable: true,
    resizable: true,
    height: "auto"
  }
});

Vue.config.productionTip = false;

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

`App.vue`

```
<template>
  <div></div>
</template>
<script>
export default {
  name: "App",
  methods: {
    show() {
      this.$modal.show(
        {
          template: `
            <div>
              <p>{{ text }}</p>
            </div>
          `,
          props: ["text"]
        },
        { text: "hello world" }
      );
    }
  },
  mounted() {
    this.show();
  }
};
</script>
```

We make all the modals added with the `draggable` and `resizable` properties added when we call `Vue.use` .

### Conclusion

The vue-js-modal library lets us add modals easily into our Vue app.