VueUse

onClickOutside

Listen for clicks outside of an element. Useful for modal or dropdown.

Usage


















 






<template>
  <div ref="target">
    Hello world
  </div>
  <div>
    Outside element
  </div>
</template>

<script>
import { ref } from 'vue'
import { onClickOutside } from '@vueuse/core'

export default {
  setup() {
    const target = ref(null)

    onClickOutside(target, (event) => console.log(event))

    return { target }
  }
}
</script>

Type Declarations

declare const events: readonly ["mousedown", "touchstart"]
declare type EventType = WindowEventMap[typeof events[number]]
/**
 * Listen for clicks outside of an element.
 *
 * @see   {@link /onClickOutside}
 * @param target
 * @param handler
 * @param options
 */
export declare function onClickOutside(
  target: MaybeRef<Element | null | undefined>,
  handler: (evt: EventType) => void,
  options?: ConfigurableWindow
): (() => void) | undefined
export {}

Source

Source • Demo • Docs