How to detect click outside in Nuxt

Detect click in Nuxt 2

In Nuxt 2, use @focusout directive.

Inside the template tag:

                                <template>
  <button @focusout="triggerClickOutside()">
  </button>
</template>
                            

If the HTML element is not focus–able like a div or a span, we need to set tabindex on this element.

Here, we set the HTML element to have tabindex:

                                <template>
  <div @focusout="triggerClickOutside()" tabindex="0">
  </div>
</template>
                            

Inside the script tag:

                                
                                        <script>
  import { defineComponent } from '@nuxtjs/composition-api';
  
  export default defineComponent({
    setup() {
      const triggerClickOutside = () => {
        // Do something here
      }
    }

    return {
      triggerClickOutside
    }
  })
</script>
                                    
                            

Tags: Nuxt