vue3で要素の外側をクリックしたら、メソッドを発動する

ライブラリをインストールします

npm install --save click-outside-vue3

scriptの直後でインポートします。

下記のコードはドロップダウンメニューで階層構造があるときを想定していますが、
v-click-outside="関数名" としたらその要素の外をクリックされた場合に、関数が発動されます。

<template>
.header-menu-items
  .header-menu-item-parent
    .header-menu-item-children-wrapper(v-click-outside="closeDropDownMenu")
      .header-menu-item-children Menu1
      .header-menu-item-children Menu2
    
</template>
<script>
import vClickOutside from 'click-outside-vue3'
export default {
  directives: {
    clickOutside: vClickOutside.directive
  },
  
  setup() {
      closeDropDownMenu = () => {
          console.log("外側がクリックされたら発動します")
      }
  }
  
  .
  .
  .

めちゃめちゃ手軽で簡単に実装できるので、試してみてください！