To detect clicks outside of a specific element in Vue.js, you can create a custom directive or use a method that utilizes event listeners. Below are two approaches you can use:

Using Event Listeners

You can add an event listener to the document or the root element (window or document.body) and check if the click event occurred outside of a particular element.

 <div ref="elementToDetectOutsideClick">
   <!-- Your content -->

export default {
 mounted() {
   document.addEventListener('click', this.handleClickOutside);
 beforeUnmount() {
   document.removeEventListener('click', this.handleClickOutside);
 methods: {
   handleClickOutside(event) {
     if (!this.$refs.elementToDetectOutsideClick.contains( {
       // Click occurred outside the element
       // Your logic here

In this approach:

  • The ref=”elementToDetectOutsideClick” attribute is assigned to the element you want to track clicks outside of.
  • The handleClickOutside method is triggered on every click, checking if the clicked element is outside the element with the given ref. If so, you can execute your logic.

Support On Demand!