How to Detect Outside Clicks in Vue

Detecting outside clicks is a common thing we need in almost all the apps that we build.

Having a reusable component to detect that is a great way to save time and help us focus on what we build.

Let me first show you the code of the component and explain how it works below. We're going to call this component DetectOutsideClick.vue.

  <div ref="root">
    <slot />

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

const emit = defineEmits(['detect'])
const root = ref(null)

const onClick = (e) => {
  if (e.target === root.value || root.value.contains(e.target)) {

onMounted(() => {
  document.body.addEventListener('click', onClick)

onUnmounted(() => {
  document.body.removeEventListener('click', onClick)

Here's an example on how to use it:

<DetectOutsideClick @detect="onOutsideClick">
  <div class="popup">A popup component</div>

How it works?

The idea here is to listen to all clicks on the page. If the clicked element is not the element inside <DetectOutsideClick> or any children of it, then it's an outside click.

We listen to all clicks on the page using this:

document.body.addEventListener('click', (e) => {})

And here's how we check if it's the same element or a child of it:

if (e.target === root.value || root.value.contains(e.target))

In this case we return because it's not an outside click. But if it is an outside click then we emit an event called detect.

That's it!

Taha Shashtari

I'm Taha Shashtari, a full-stack web developer. Building for the web is my passion. Teaching people how to do that is what I like the most. I like to explore new techniques and tools to help me and others write better code.

Subscribe to get latest updates about my work
©2024 Taha Shashtari. All rights reserved.