A Vue.js 3 click outside custom directive
vue3-click-outside
Directive for Vue 3 to run a method on clicking outside of the binded element
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>
Contributing
If you want to contribute to this project simply fork it and clone it then run
npm i
in the root of the project, then run
npm run start
to run development server.
Licence and cast
MIT Licence