# Easy way to build Outside Click Popup Component in Vue.js

When developing a large application with multiple components, it is important to prioritize creating components that are customizable, scalable, and reusable. However, it is common to overlook implementing certain functionalities like outside click functionality for components such as popovers or popups. This can result in bugs that need to be fixed later on.

In this blog post, we will discuss how to create an outside click wrapper component in Vue.js. This component will enable users to open a popover by clicking on a specific element and close it by clicking anywhere outside the popover. We will analyze the provided code step by step to understand how it works and achieves the desired behavior.

---

**Code Explanation**

We begin by creating the PopupWrapper.vue component and utilizing the **Composition API** to build it. The Composition API is a feature that offers an alternative approach to organizing and reusing logic within Vue components. It works alongside the Options API, which was the primary API in Vue.js 2.

**Step 1**

```javascript
<template>
  <div ref="customDiv">
    <div @click="toggle">
      <slot name="header"/>
    </div>
    
    <div v-if="showPopup" @click.stop>
      <slot name="content"/>
    </div>	
  </div>
</template>
```

To create an outside click popup component, we first assign a reference to `<div>` element using **ref="customDiv"**. This reference allows us to access the element in the component's JavaScript code. We utilize **Slots** to insert dynamic content into components from the parent component. In this scenario, the `header` and `content` slots will be provided by the parent component when using this popup component.

We also use the `@click.stop` directive to prevent the click event from propagating to parent elements. This ensures that clicking inside the popup content does not trigger the outside click behavior.

Overall, this template forms the foundation for an outside click popup component.

---

**Step 2**

```javascript
<script setup>
  import { onMounted, onUnmounted, ref } from 'vue'

  const showPopup = ref(false)
  const customDiv = ref(null)

  const toggle = () => {
    showPopup.value = !showPopup.value
  }

  const handleClickOutside = (event) => {
    if (customDiv.value && !customDiv.value.contains(event.target)) {
      showPopup.value = false
    }
  }

  onMounted(() => {
    document.addEventListener("click", handleClickOutside)
  })

  onUnmounted(() => {
    document.removeEventListener("click", handleClickOutside)
  })
</script>
```

The provided code showcases the usage of the **setup syntax** of the Composition API, creating a more declarative approach to defining component logic. It utilizes the `ref` function to create reactive variables like **showPopup** and **customDiv**. The `toggle` function toggles the visibility of the popup by negating showPopup.value. The **handleClickOutside function** is crucial as it checks if a click occurred outside the component and hides the popup accordingly. The `onMounted` hook adds a "click" event listener to the document, triggering handleClickOutside, while the `onUnmounted` hook removes the event listener to prevent memory leaks. This code provides a comprehensive implementation of the outside click popup functionality in Vue.js.

---

## **How to use**

**Code Example**

```javascript
<template>
  <div id="app">
    <PopupWrapper>
      <template #header>
        <div class="popover">Open Popover</div>
      </template>
      <template #content>
        <div class="popover-content">This is a Popup Content</div>
      </template>
    </PopupWrapper>
  </div>
</template>

<script setup>
import PopupWrapper from './components/PopupWrapper.vue';
</script>
```

Overall, we have the template that consists of a root `<div>` element with the ID "app" serving as the Vue application's root. Inside this `<div>`, there is a `PopupWrapper` component that provides the outside click popup functionality. The PopupWrapper component contains two elements: one for the `header slot (#header)` and one for the `content slot (#content)`. The header slot includes an element with the class "**popover**" and the text "Open Popover", which will be inserted into the header slot. Similarly, the content slot contains an element with the class "popover-content" and the text "This is a Popup Content", which will be inserted into the content slot.

Note: CSS Styling in this component is optional. You can style the code with your preference.

---

## **DEMO**

You can access the code [here.](https://stackblitz.com/edit/vuejs-outside-click-popup?file=src%2FApp.vue)

Additionally, you may refer to the following blog post [here](https://blog.jobins.jp/improving-your-applications-features-with-vue-custom-directives) that provides detailed information about **Vue custom directives** and how you can utilize them to implement similar outside click functionality in your applications.

---

## **Conclusion**

👏👏 In conclusion, the "Outside Click Popup Component Functionality on Vue.js" tutorial demonstrates how to create an interactive and reusable popup component with outside click detection using Vue.js and the Composition API. By following this tutorial, you can enhance your Vue.js applications with a convenient and user-friendly popup feature. I suggest you give a try on your project and enjoy it!

Feel free to share your thoughts and opinions and leave me a comment if you have any problems or questions.

Till then, Keep on Hacking, Cheers