vue3-click-outside

Directive for Vue 3 to run a method on clicking outside of the binded element

Demo

Demo

Installation

npm install --save @mahdikhashan/vue3-click-outside

How to use

add the custom directive to you component

<template>
  <main>
    <div v-click-out-side="customMethod" @click="clickInside" class="box">
      BOX
    </div>
    <br />
    <p>Outside of the box</p>
  </main>
</template>

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

export default {
  name: "Box",
  directives: {
    clickOutSide,
  },
  props: {
    msg: String,
  },
  methods: {
    customMethod() {
      alert("You clicked outside the box!");
    },
    clickInside() {
      alert("You clicked inside the box!");
    },
  },
};
</script>

<style scoped>
div {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  background-color: red;
  width: 100px;
  height: 100px;
}
p {
  font-size: 2rem;
  font-weight: 800;
}
</style>

Use Composition Api

If you want to use the library with the <script setup> or composition api, you need to rename the object like bellow.

import { clickOutSide as vClickOutSide } from '@mahdikhashan/vue3-click-outside'

Contributing

Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are greatly appreciated.

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

License

Distributed under the MIT License. See LICENSE for more information.

Contributors

Many thanks for your help!

The image of contributors is made with contrib.rocks.