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:

1import { createApp } from 'vue';
2import App from './App.vue';
3
4import vClickout from 'vue3-clickout';
5
6createApp(App)
7  .use(vClickout)
8  .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:

1<script>
2import vClickout from "vue3-clickout";
3
4export default {
5  directives: {
6    clickout: vClickout
7  }
8}
9</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 }

1<template>
2  <div v-clickout="clickOutside">
3    ...
4  </div>
5</template>
6
7<script>
8export default {
9  methods: {
10    clickOutside(event) {
11      console.log(event); // event = { el, event }
12    }
13  }
14}
15</script>

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

Use with Composition API

1<template>
2  <div v-clickout="clickOutside">
3    ...
4  </div>
5</template>
6
7<script>
8export default {
9  setup() {
10    const clickOutside = event => {
11      console.log(event); // event = { el, event }
12    }
13
14    return { clickOutside }
15  } 
16}
17</script>

Options

By default, a method or function is passed to a directive:
<div v-clickout="clickOutsideFunction">

If you need to pass arguments, then you need to pass it as an object:

event (Function); required

<div v-clickout="{event: clickOutsideFunction}">

Analogue of the default behavior. Only method passed.

active (Boolean)

<div v-clickout="{event: clickOutsideFunction, active: true}">

The element will be considered active immediately, as if you had already clicked on it. This can be useful if the target element is immediately displayed on the page waiting for the callback to be called (for example, when entering the page, there may already be a modal window or some other pop-up block).

• The directive class is immediately added to the target element

always (Boolean)

<div v-clickout="{event: clickOutsideFunction, always: true}">

The element will always be considered active. The callback will ALWAYS be fired on every click outside of the target element. This can be useful if you need to point the user to some interactive part of the page where his participation is required and without which further actions are impossible. Or any other special occasion.

• The directive class is always added to the target element

License

ISC