//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