VUE

useClickOutside Composable

Detect clicks outside a target element with cleanup and event options

Vue3ComposablesClickOutsideDOMEvents

Code

import { onMounted, onUnmounted, type Ref } from 'vue';

export function useClickOutside(
  target: Ref<HTMLElement | null>,
  callback: (event: MouseEvent | TouchEvent) => void,
  options: { capture?: boolean; passive?: boolean } = { capture: true, passive: true }
) {
  const handleClickOutside = (event: MouseEvent | TouchEvent) => {
    __TOKEN_16__ (!target.value) return;
    __TOKEN_18__ (!target.value.contains(event.target as Node)) {
      callback(event);
    }
  };

  onMounted(() => {
    document.addEventListener('click', handleClickOutside, options);
    document.addEventListener('touchstart', handleClickOutside, options);
  });

  onUnmounted(() => {
    document.removeEventListener('click', handleClickOutside, options);
    document.removeEventListener('touchstart', handleClickOutside, options);
  });
}

// Usage example
// const dropdownRef = ref<HTMLElement | null>(null);
// useClickOutside(dropdownRef, () => {
//   isDropdownOpen.value = false;
// });