Creating a Stylish Image Modal Using Vue 3 and JavaScript
Written on
Chapter 1: Introduction to Vue 3
Vue 3 is the latest iteration of the user-friendly Vue JavaScript framework, which empowers developers to build dynamic front-end applications. This guide will demonstrate how to create an image modal using Vue 3 and JavaScript.
Creating the Project
To initiate the Vue project, we will utilize the Vue CLI. You can install it by running the following commands:
npm install -g @vue/cli
or, if you prefer Yarn:
yarn global add @vue/cli
Once installed, create a new project by executing:
vue create image-modal
Select the default options to set up your project.
Chapter 2: Building the Image Modal
To implement the image modal, you'll need to write the following code:
<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"><</button>
<img :src="image" />
<button @click="next">></button>
</div>
</div>
</div>
</template>
<script>
const images = [
];
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) % images.length;
this.image = images[this.index];
},
onClickOutside(e) {
if (e.target.localName !== "button") {
this.displayModal = false;}
},
},
mounted() {
window.addEventListener("click", this.onClickOutside);},
};
</script>
<style scoped>
img {
width: 200px;
height: 200px;
}
#modal {
position: absolute;
top: 20px;
left: 20px;
border: 1px solid gray;
background-color: white;
}
</style>
The button labeled "Open Modal" triggers displayModal to become true, thus revealing the modal. The .stop modifier prevents the click event from propagating up the DOM hierarchy, ensuring it only affects the intended elements.
The modal div's visibility is controlled by v-if="displayModal", making it only visible when displayModal is true. Inside this modal, you'll find the close button, which sets displayModal to false, closing the modal.
Two additional buttons allow navigation through the images. The img element uses :src="image" to display the currently selected image. The next method advances the index for the next image by incrementing this.index and wrapping it using modulo operation. The prev method works similarly, decrementing the index.
The onClickOutside method listens for clicks outside the modal to close it unless a button inside the modal is clicked. This is achieved by adding a click listener in the mounted lifecycle hook, which is ideal for such tasks since it runs after the component is fully loaded.
The modal's styles are defined in the scoped style section, ensuring it appears above the button that opens it, with a visible border and white background.
In this video titled "Build a Reusable Modal Component Using Vue 3, The Composition API & Slots," you'll find a detailed explanation of creating a modal component with Vue 3, focusing on reusability and best practices.
The second video, "Better Way to Create Modals on Vue JS with Dialog HTML Element," provides insights into alternative methods for implementing modals in Vue.js, enhancing your knowledge further.
Conclusion
Creating a custom modal in your Vue 3 application is straightforward and effective. If you found this tutorial helpful, explore more engaging content at plainenglish.io.