vue3-clickout

A Vue 3 directive to call a function when clicked outside of an element.

Usage no npm install needed!

<script type="module">
  import vue3Clickout from 'https://cdn.skypack.dev/vue3-clickout';
</script>

README

vue3-clickout

A directive that allows you to call a function when you click outside the active area of an element. The active area of an element is the element itself and any descendant nested within it.

Requirements

  • Vue 3.x

Installation

npm i vue3-clickout

Global registration

When registered globally, the directive will be available throughout the project. This means that you can use it in any component without the need for additional imports.

In main.js:

import { createApp } from 'vue';
import App from './App.vue';

import vClickout from 'vue3-clickout';

createApp(App)
  .use(vClickout)
  .mount('#app');

Local registration

When registering locally, the directive will be available for use only in the component where it was registered.

In any component:

<script>
import vClickout from "vue3-clickout";

export default {
  directives: {
    clickout: vClickout
  }
}
</script>

Usage (examples for global registration)

When clicked in the active area, the class v-clickout-active is added to the element, otherwise it is removed.

The data that is passed to the callback function is an object with an element and an event: { el, event }

<template>
  <div v-clickout="clickOutside">
    ...
  </div>
</template>

<script>
export default {
  methods: {
    clickOutside(event) {
      console.log(event); // event = { el, event }
    }
  }
}
</script>

clickOutside - callback function to execute after clicking outside the active area of the element.

Use with Composition API

<template>
  <div v-clickout="clickOutside">
    ...
  </div>
</template>

<script>
export default {
  setup() {
    const clickOutside = event => {
      console.log(event); // event = { el, event }
    }

    return { clickOutside }
  } 
}
</script>

License

ISC