Add a Modal 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.

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.