Building a custom modal popup component in Vue.js

In this tutorial we’ll be building a modal popup component using Vue.js.

For the purpose of this tutorial I setup a project using vue create. Let’s get started on the modal component by creating a new DemoModal.vue file in the /src/components folder. We’ll start with the <template> section that contains the required HTML markup for the modal:

<template>
  <div class="modal">
    <div class="modal-inner">      
      <button @click="close">&times;</button>
      <p>Hello World!</p>      
    </div>
  </div>
</template>Code language: HTML, XML (xml)

This is simply a close button and paragraph of text wrapped with a couple of <div> elements. These will allow us to style the component as desired. This will be enough to show you how the modal works for the purposes of this tutorial. In a real world application you could put whatever content you require inside the modal-inner element.

Next the <script> which contains the method for the close button’s functionality:

<script>
export default {  
  methods: {
    close() {
      this.$emit("close");
    },
  },
};
</script>Code language: HTML, XML (xml)

We’ve used an $emit function here which passes the close event to the parent component. You’ll see later in the tutorial how this works when we load the component into our application.

Finally let’s add a <style> section with some basic CSS:

<style>
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: lightseagreen;
}
.modal-inner {  
  background-color: white;
  border-radius: 0.5em;
  padding: 2em;
  margin: auto;
}
</style>Code language: HTML, XML (xml)

This will provide a content overlay with a horizontal and vertical centered modal.

Now we can load the component by modifying App.vue starting with the <template>:

<template>
  <div id="app">
    <button @click="openModal">Open</button>
    <DemoModal v-show="isModalVisible" @close="closeModal" />
  </div>
</template>Code language: HTML, XML (xml)

Here we’re using the v-show directive which toggles the CSS display property of an element using inline styles. If isModalVisible equals true it will set the display property as visible otherwise it will be invisible making the modal hidden.

Finally replace the <script> section with the following:

<script>
  import DemoModal from './components/DemoModal.vue';
  export default {
    name: 'App',
    components: {
      DemoModal,
    },
    data() {
      return {
        isModalVisible: false,
      };
    },
    methods: {
      openModal() {
        this.isModalVisible = true;
      },
      closeModal() {
        this.isModalVisible = false;
      }
    }
  };
</script>Code language: HTML, XML (xml)

This script imports the DemoModal component along with managing the state of isModalVisible which as mentioned in the previous step applies inline CSS to show/hide the modal based on it’s value. The default state is false and only set as true when the openModal method is triggered from the open modal button.

That’s all for this tutorial. You should now have a working modal component that can be customised to use in a Vue.js application. Full working source code for this tutorial is available on GitHub. While you’re here be sure to check out these other Vue.js tutorials.