Package Exports

@venegrad/vue3-click-outside
@venegrad/vue3-click-outside/dist/venClickOutside.esm.js
@venegrad/vue3-click-outside/dist/venClickOutside.ssr.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@venegrad/vue3-click-outside) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Vue 3 Click Outside directive

Directive for adding click outside event in Vue 3 or Nuxt3

Using in component

<template>
<div class="conainer">
  <div  v-outside="hide">
    <button @click="open = true">{{ open }}</button>
  </div>
</div>
</template>

<script>
import outside from "@venegrad/vue3-click-outside"

export default {
  data() {
    return {
      open: false
    }
  },
  directives: {
    outside
  },
  methods: {
    hide() {
      this.open = false
    }
  }
}
</script>

or u can register it global if need
./src/main.js

import { createApp } from 'vue'
import App from './App.vue'
import outside from "@venegrad/vue3-click-outside"

const app = createApp(App)
app.directive('outside', outside)
app.mount('#app')

Nuxtjs 3

use it as global plugin:
./plugins/global.js

import outside from "@venegrad/vue3-click-outside"

export default defineNuxtPlugin(async (nuxtApp) => {
  nuxtApp.vueApp.directive('outside', outside)
})

Help links:

If my solution was helpful to you, please give me a star on Github or get my day better with:
USDT TRC20: TKXybH3YoFvT5h8bQFLdkDBtiXA65y7xaB
USDT ERC20: 0xc3efeB4825E350eE5D6B032Aa1dE144B09B5bB0D