JAVASCRIPT
Detect Clicks Outside a Component with a Vue 3 Composable
Implement a reusable Vue 3 composable to easily detect when a user clicks outside a specific DOM element, useful for dropdowns or modals.
// useClickOutside.js
import { ref, onMounted, onUnmounted } from 'vue';
export function useClickOutside(elementRef) {
const isClickedOutside = ref(false);
const handleClick = (event) => {
if (elementRef.value && !elementRef.value.contains(event.target)) {
isClickedOutside.value = true;
} else {
isClickedOutside.value = false;
}
};
onMounted(() => {
document.addEventListener('click', handleClick);
});
onUnmounted(() => {
document.removeEventListener('click', handleClick);
});
return { isClickedOutside };
}
// In a Vue component:
// <template>
// <div ref="myElement">
// Click inside me
// <p v-if="isClickedOutside">Clicked outside!</p>
// </div>
// </template>
//
// <script setup>
// import { ref } from 'vue';
// import { useClickOutside } from './useClickOutside';
//
// const myElement = ref(null);
// const { isClickedOutside } = useClickOutside(myElement);
// </script>
How it works: This composable `useClickOutside` takes a `ref` to a DOM element. It attaches a global click listener that checks if the clicked target is inside the referenced element. `isClickedOutside` reactively updates, making it easy to create interactive UI elements like dropdowns or modals that close when clicked away from. It ensures proper cleanup by removing the event listener when the component unmounts.