# vue3-click-away

> Vue 3.0 Compatible Click Away Directive

Latest version **1.2.4** (published 2022-03-15) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue3-click-away
pnpm add vue3-click-away
yarn add vue3-click-away
bun add vue3-click-away
```

## Health

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

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.2.4 |
| Published | 2022-03-15 |
| First published | 2020-09-21 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 14.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 108 |
| Author | Vincent Gabriel |
| Maintainers | vinceg |
| Keywords | vue, vue.js, vue3, 3.0, clickaway, outside, click, away, clickoutside |

## Links

- npm: https://www.npmjs.com/package/vue3-click-away
- Repository: https://github.com/VinceG/vue-click-away
- Homepage: https://github.com/VinceG/vue-click-away#readme
- Issues: https://github.com/VinceG/vue-click-away/issues
- npm.io page: https://npm.io/package/vue3-click-away

## 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

- 1.2.4 (latest) — 2022-03-15
- 1.2.3 — 2022-03-15
- 1.2.1 — 2021-04-06
- 1.1.0 — 2020-11-29
- 1.0.5 — 2020-10-02
- 1.0.4 — 2020-09-22
- 1.0.3 — 2020-09-22
- 1.0.2 — 2020-09-22
- 1.0.1 — 2020-09-22
- 1.0.0 — 2020-09-22
- 0.1.6 — 2020-09-21
- 0.1.5 — 2020-09-21
- 0.1.3 — 2020-09-21
- 0.1.2 — 2020-09-21
- 0.1.1 — 2020-09-21
- … 1 more at https://npm.io/package/vue3-click-away/versions

## README

# Vue Click Away

> Demo is available using VitePress and is included in this repository. See [Demo](#demo) Section on how to use and the reason why it's not live yet.

> Vue 3.0 Compatible Click Away Directive

[![npm version](https://img.shields.io/npm/v/vue3-click-away.svg)](https://www.npmjs.com/package/vue3-click-away)
![GitHub issues](https://img.shields.io/github/issues/vinceg/vue-click-away)
![NPM](https://img.shields.io/npm/l/vue3-click-away)
![GitHub contributors](https://img.shields.io/github/contributors/vinceg/vue-click-away)
![GitHub code size in bytes](https://img.shields.io/github/languages/code-size/vinceg/vue-click-away)


![Example GIF](assets/animated.gif)


## Overview

Detect if a click event happened outside of an element. Compatible with Vue 3.x.

## Requirements

- Vue 3.x

## Installation

```
npm i -s vue3-click-away
```

<p></p>

```
yarn add vue3-click-away
```

## Usage

> By default the module exports a plugin, but you can also use this as a mixin which is documented below or as a directive.

```js
import { createApp } from "vue";
import App from "./App.vue";
import VueClickAway from "vue3-click-away";

const app = createApp(App);

app.use(VueClickAway) // Makes 'v-click-away' directive usable in every component
app.mount('#app')
```

<p></p>

With Options API
```vue
<template>
  <div v-click-away="onClickAway">
    ...
  </div>
</template>

<script>
export default {
  methods: {
    onClickAway(event) {
      console.log(event)
    }
  }
}
</script>
```

or with Vue Composition API & Typescript

```vue
<template>
  <div v-click-away="onClickAway">
    ...
  </div>
</template>

<script>
export default {
  setup() {
    const onClickAway = (event) => {
      console.log(event)
    }

    return { onClickAway }
  } 
}
</script>
```

### Directive

```html
<template>
  <div v-click-away="onClickAway">
    ...
  </div>
</template>
```

<p></p>

```js
import { directive } from "vue3-click-away";
export default {
  directives: {
    ClickAway: directive
  },
  methods: {
    onClickAway(event) {
      console.log(event);
    }
  }
}
```

### Mixin

```html
<template>
  <div v-click-away="onClickAway">
    ...
  </div>
</template>
```

<p></p>

```js
import { mixin as VueClickAway } from "vue3-click-away";
export default {
  mixins: [VueClickAway],
  methods: {
    onClickAway(event) {
      console.log(event);
    }
  }
}
```

## Demo

Currently VitePress is having an issue building for production since Directives require SSR implementation and there is no way to override this or skip it (VuePress has ClientOnly component, VitePress doesn't, Yet). 

I've opened an issue and pending to see if there is a way to go around it, [Click Here](https://github.com/vuejs/vitepress/issues/92) to view the issue reported.

For the time being, to test this out clone the repository and run the following inside the `/docs` folder

```
npx vitepress
```


![VitePress Documentation](assets/demo.png)

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