Easy Click Outside Directive For Vue 3

Install & Download:

Description:

A click outside directive that makes it possible to detect Click Outside and Click Inside in Vue 3 applications.

How to use it:

1. Install and import the clickOutSide module.

import clickOutSide from "@mahdikhashan/vue3-click-outside";

2. Detect Click Outside event on an element.

<template>
  <main>
    <div v-click-out-side="myMethod" @click="clickInside">
      Element
    </div>
  </main>
</template>

export default {
  name: "Box",
  directives: {
    clickOutSide,
  },
  props: {
    msg: String,
  },
  methods: {
    myMethod() {
      alert("Clicked Outside");
    },
    clickInside() {
      alert("Clicked Inside");
    },
  },
};

Preview: