# v-click-outside-x

> Vue directive to react on clicks outside an element.

Latest version **4.1.3** (published 2021-04-26) · MIT license · 0 weekly downloads

## Install

```sh
npm install v-click-outside-x
pnpm add v-click-outside-x
yarn add v-click-outside-x
bun add v-click-outside-x
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 4.1.3 |
| Published | 2021-04-26 |
| First published | 2018-02-27 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=8.11.4 |
| Dependencies | 0 |
| Unpacked size | 89.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 7 |
| Author | Graham Fairweather |
| Maintainers | sergiocrisostomo |
| Keywords | vue, click, outside, directive |

## Links

- npm: https://www.npmjs.com/package/v-click-outside-x
- Repository: https://github.com/SergioCrisostomo/v-click-outside-x
- Homepage: https://github.com/SergioCrisostomo/v-click-outside-x.git
- Issues: https://github.com/SergioCrisostomo/v-click-outside-x/issues
- npm.io page: https://npm.io/package/v-click-outside-x

## Alternatives

- [@sindresorhus/slugify](https://npm.io/package/@sindresorhus/slugify.md) — 3.7M weekly downloads
- [solid-js](https://npm.io/package/solid-js.md) — 2.7M weekly downloads
- [expo-glass-effect](https://npm.io/package/expo-glass-effect.md) — 2.5M weekly downloads
- [nanoassert](https://npm.io/package/nanoassert.md) — 780.8K weekly downloads
- [@ffmpeg/ffmpeg](https://npm.io/package/@ffmpeg/ffmpeg.md) — 529.5K weekly downloads

## Recent versions

- 4.1.3 (latest) — 2021-04-26
- 4.1.2 — 2021-04-26
- 4.1.0 — 2020-01-14
- 4.0.19 — 2019-08-28
- 4.0.18 — 2019-08-27
- 4.0.17 — 2019-08-27
- 4.0.16 — 2019-08-07
- 4.0.15 — 2019-07-31
- 4.0.14 — 2019-07-26
- 4.0.13 — 2019-07-25
- 4.0.12 — 2019-07-23
- 4.0.11 — 2019-07-22
- 4.0.10 — 2019-07-17
- 4.0.9 — 2019-07-12
- 4.0.8 — 2019-07-09
- … 37 more at https://npm.io/package/v-click-outside-x/versions

## README

<a
  href="https://travis-ci.org/Xotic750/v-click-outside-x"
  title="Travis status">
<img
  src="https://travis-ci.org/Xotic750/v-click-outside-x.svg?branch=master"
  alt="Travis status" height="18">
</a>
<a
  href="https://david-dm.org/Xotic750/v-click-outside-x"
  title="Dependency status">
<img src="https://david-dm.org/Xotic750/v-click-outside-x/status.svg"
  alt="Dependency status" height="18"/>
</a>
<a
  href="https://david-dm.org/Xotic750/v-click-outside-x?type=dev"
  title="devDependency status">
<img src="https://david-dm.org/Xotic750/v-click-outside-x/dev-status.svg"
  alt="devDependency status" height="18"/>
</a>
<a
  href="https://badge.fury.io/js/v-click-outside-x"
  title="npm version">
<img src="https://badge.fury.io/js/v-click-outside-x.svg"
  alt="npm version" height="18">
</a>
<a
  href="https://www.jsdelivr.com/package/npm/v-click-outside-x"
  title="jsDelivr hits">
<img src="https://data.jsdelivr.com/v1/package/npm/v-click-outside-x/badge?style=rounded"
  alt="jsDelivr hits" height="18">
</a>
<a
  href="https://bettercodehub.com/results/Xotic750/v-click-outside-x"
  title="bettercodehub score">
<img src="https://bettercodehub.com/edge/badge/Xotic750/v-click-outside-x?branch=master"
  alt="bettercodehub score" height="18">
</a>
<a
  href="https://coveralls.io/github/Xotic750/v-click-outside-x?branch=master"
  title="Coverage Status">
<img src="https://coveralls.io/repos/github/Xotic750/v-click-outside-x/badge.svg?branch=master"
  alt="Coverage Status" height="18">
</a>

<a name="v-click-outside-x"></a>

# v-click-outside-x

Vue V2 directive to react on `clicks` outside an element.

## Install

```bash
$ npm install --save v-click-outside-x
```

```bash
$ yarn add v-click-outside-x
```

## Use

```js
import Vue from 'vue';
import * as vClickOutside from 'v-click-outside-x';

Vue.use(vClickOutside);
```

```html
<script>
  export default {
    methods: {
      onClickOutside(event) {
        console.log('Clicked outside. Event: ', event);
      },
    },
  };
</script>

<template>
  <div v-click-outside="onClickOutside"></div>
</template>
```

## Directive

```html
<script>
  export default {
    directives: {
      clickOutside: vClickOutside.directive,
    },
    methods: {
      onClickOutside(event) {
        console.log('Clicked outside. Event: ', event);
      },
    },
  };
</script>

<template>
  <div v-click-outside="onClickOutside"></div>
</template>
```

## Event Modifiers

It is not a very common need to call `event.preventDefault()`, `event.stopPropagation()` or
`event.stopImmediatePropagation()` for click outside event handlers.
Care should be taken when using these!

The need for capture though, is reasonably common when you want menus or dropdown to
behave more like their native elements.

```html
<template>
  <!-- the click event´s propagation will be stopped -->
  <div v-click-outside.stop="doThis"></div>

  <!-- the click event´s default will be stopped -->
  <div v-click-outside.prevent="doThat"></div>

  <!-- modifiers can be chained -->
  <div v-click-outside.stop.prevent="doThat"></div>

  <!-- use capture mode when adding the event listener -->
  <div v-click-outside.capture="doThis"></div>
</template>
```

## Pointer Events Examples

By default, if no argument is supplied then `click` will be used. You can specify
the event type being bound by supplying an arguments, i.e. `pointerdown`.

```html
<script>
  export default {
    methods: {
      onClickOutside(event) {
        console.log('Clicked outside. Event: ', event);
      },
    },
  };
</script>

<template>
  <div v-click-outside:pointerdown="onClickOutside"></div>
</template>
```

For support of the [PointerEvent API](https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent),
consider loading the [Pointer Events Polyfill](https://www.npmjs.com/package/pepjs).

# Multiple Events Examples

```html
<script>
  export default {
    methods: {
      onClickOutside1(event) {
        console.log('Clicked outside 1. Event: ', event);
      },
      onClickOutside2(event) {
        console.log('Clicked outside 2. Event: ', event);
      },
      onClickOutside3(event) {
        console.log('Clicked outside 3. Event: ', event);
      },
    },
  };
</script>

<template>
  <div
    v-click-outside.capture="onClickOutside1"
    v-click-outside:click="onClickOutside2"
    v-click-outside:pointerdown.capture="onClickOutside3"
  ></div>
</template>
```

## License

[MIT License](https://github.com/ndelvalle/v-click-outside-x/blob/master/LICENSE)

---
_Source: https://npm.io/package/v-click-outside-x · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._