Create an Image Modal with Vue 3 and JavaScript

Vue 3 is the latest version of the easy to use Vue JavaScript framework that lets us create front end apps.

In this article, we’ll look at how to create an image modal with Vue 3 and JavaScript.

Create the Project

We can create the Vue project with Vue CLI.

To install it, we run:

npm install -g @vue/cli

with NPM or:

yarn global add @vue/cli

with Yarn.

Then we run:

vue create image-modal

and select all the default options to create the project.

Create the Image Modal

To create the image modal, we write:

<template>
  <div>
    <button @click.stop="displayModal = true">open modal</button>
    <div id="modal" v-if="displayModal">
      <button @click="displayModal = false">x</button>
      <div>
        <button @click="prev">&lt;</button>
        <img :src="image" />
        <button @click="next">&gt;</button>
      </div>
    </div>
  </div>
</template>
<script>
const images = [
  "https://images.dog.ceo/breeds/pomeranian/n02112018_5091.jpg",
  "https://images.dog.ceo/breeds/mountain-swiss/n02107574_753.jpg",
  "https://images.dog.ceo/breeds/leonberg/n02111129_3028.jpg",
];
export default {
  name: "App",
  data() {
    return { index: 0, image: images[0], displayModal: false };
  },
  methods: {
    next() {
      this.index = (this.index + 1) % images.length;
      this.image = images[this.index];
    },
    prev() {
      this.index = (this.index - 1) % images.length;
      this.image = images[this.index];
    },
    onClickOutsode(e) {
      if (e.target.localName !== "button") {
        this.displayModal = false;
      }
    },
  },
  mounted() {
    window.addEventListener("click", this.onClickOutsode);
  },
};
</script>

<style scoped>
img {
  width: 200px;
  height: 200px;
}

#modal {
  position: absolute;
  top: 20px;
  left: 20px;
  border: 1px solid gray;
  background-color: white;
}
</style>

The open modal button sets displayModal to true to let us open the modal.

We add the stop modifier so that the click event doesn’t bubble up to the ancestor elements so that it doesn’t trigger click events on them.

The div with ID modal has the v-if set to displayModal to let us show it only when displayModal is true .

Inside it, we have the x button to set displayModal to false to close the modal.

Then we have 2 more buttons to move to the previous and next images respectively.

img has src set to image to display the current image.

In the component object, we have the next method which gets the index of the next image by adding 1 to this.index and get the remainder of that when divided by images.length .

Similarly, we have the prev method, which gets the previous image by subtracting 1 from this.index to get the index of tjhe previous image.

The onClickOutside method is used by the window ‘s click listener to detect clicks from everything inside the browser screen.

We check that localName isn’t 'button' .

If it isn’t, then we set this.displayModal to false to close the modal.

This makes sure that all the buttons except the ‘x’ button in our code don’t close the modal, but when we click outside the modal closes.

Then in the mounted hook, we add the click listener with addEventListener to listen for clicks.

The mounted hook is run when all the elements are loaded, so this is the appropriate hook to add the click listener.

Then in the style tag, we make the div with ID modal a modal by setting position to absolute to make it site above the open modal button.

And then we change the position of it with the top and left properties.

border adds a border to the modal div so we can see the modal.

background-color is set to white so that it doesn’t have a transparent background.

Conclusion

We can create our own modal easily in our app with Vue 3.