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

<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

<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

<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.

Additionally, you may refer to the following blog post here 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

JoBins Engineering

JoBins Engineering

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

How to use

DEMO

Conclusion