//Inside a plugins folder export default defineNuxtPlugin((nuxtApp) => { nuxtApp.vueApp.directive("click-outside", { beforeMount(el, binding) { el.clickOutsideEvent = function (event) { if (!(el === event.target || el.contains(event.target))) { binding.value(event, el); } }; document.addEventListener("click", el.clickOutsideEvent); }, unmounted(el) { document.removeEventListener("click", el.clickOutsideEvent); }, }); }); //Inside the DOM v-click-outside="handleCloseDestinationSearchResults"
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter