Creating a Pop-Up Page in Vue.js: A Step-by-Step Guide

In Vue.js, creating a pop-up page (or modal) from a main page is a common feature for many web applications. Whether it’s for displaying a form, image, or any other content, implementing a pop-up page is quite simple. In this guide, we’ll walk through how to create a pop-up page and how to manage its behavior.

We’ll break the example into two parts:

1. The MainPage.vue file, which is where the main content is.
2. The PopUpPage.vue file, which is where the content of the pop-up resides.

Step 1: Create the Pop-Up Page (PopUpPage.vue)

Let’s start by creating the pop-up page component that will appear when triggered.

PopUpPage.vue

<template>
  <div v-if="isVisible" class="popup-overlay">
    <div class="popup-content">
      <h2>Pop-Up Page</h2>
      <p>This is a simple pop-up message!</p>
      <button @click="closePopup">Close</button>
    </div>
  </div>
</template>


<script>
export default {
  name: "PopUpPage",
  props: {
    isVisible: {
      type: Boolean,
      required: true,
    },
  },
  methods: {
    closePopup() {
      this.$emit("update:isVisible", false); // Close the popup when button is clicked
    },
  },
};
</script>


<style scoped>
.popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}


.popup-content {
  background: white;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  text-align: center;
}


button {
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}


button:hover {
  background-color: #0056b3;
}
</style>

Step 2: Create the Main Page (MainPage.vue)

Now, let’s create the main page where the pop-up will be triggered from. In this file, we will manage the state of the pop-up visibility.

MainPage.vue

<template>
  <div>
    <h1>Welcome to the Main Page</h1>
    <button @click="showPopup">Open Pop-Up</button>


    <!-- Pop-Up Component -->
    <PopUpPage :isVisible="isPopupVisible" @update:isVisible="isPopupVisible = $event" />
  </div>
</template>


<script>
import PopUpPage from './PopUpPage.vue';


export default {
  name: "MainPage",
  components: {
    PopUpPage,
  },
  data() {
    return {
      isPopupVisible: false,
    };
  },
  methods: {
    showPopup() {
      this.isPopupVisible = true; // Show the pop-up when button is clicked
    },
  },
};
</script>


<style scoped>
h1 {
  text-align: center;
  margin-top: 20px;
}


button {
  display: block;
  margin: 20px auto;
  padding: 10px 20px;
  background-color: #28a745;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}


button:hover {
  background-color: #218838;
}
</style>

Explanation:

• In MainPage.vue, we import the PopUpPage component.
• The isPopupVisible data property controls the visibility of the pop-up.
• The showPopup method is triggered when the button is clicked, setting isPopupVisible to true and displaying the pop-up.
• We pass the isVisible prop to the pop-up component to control whether it’s visible.
• The @update:isVisible event is used to handle closing the pop-up from the child component (PopUpPage.vue).

Step 3: How They Work Together

1. When the user clicks the “Open Pop-Up” button on the MainPage, the showPopup method is called, setting isPopupVisible to true.
2. This triggers the PopUpPage.vue component, which becomes visible because of the v-if="isVisible" directive.
3. When the “Close” button on the pop-up is clicked, the closePopup method emits an event back to the parent component (MainPage.vue), which updates isPopupVisible to false, thus hiding the pop-up.