npmpackage.info

Gathering detailed insights and metrics for vue3-click-away

Other packages similar to vue3-click-away

v-click-away

0.0.3

another vue3 clickaway directive

vue3-all-click-away

1.0.0

Vue 3.0 Compatible Click Away Directive, also including right clicks

Gathering detailed insights and metrics for vue3-click-away

vue3-click-away - 1.2.4 | npmpackage.info

vue3-click-away

Vue 3.0 Compatible Click Away Directive

1.2.4

109

MIT

JavaScript

14.37 kB

1.9

Installations

npm install vue3-click-away

Developer Guide

BETA

Typescript

Yes

Module System

CommonJS

Node Version

16.8.0

NPM Version

7.21.0 Score

99.4

Supply Chain

100

Quality

Maintenance

100

Vulnerability

100

License

Pull Requests

Open

0

Total

9

Closed

1

Merged

8

Issues

Open

10

Total

16

Closed

6

Releases

v1.2.4

Updated on Mar 15, 2022

v1.2.3

Updated on Mar 15, 2022

v1.2.1

Updated on Apr 06, 2021

v1.2.0

Updated on Mar 23, 2021

v1.1.0

Updated on Nov 29, 2020

v1.0.6

Updated on Nov 16, 2020

View All 16 releases

Languages

JavaScript

JavaScript (100%)

Developer

VinceG

Download Statistics

Total Downloads

Last Day

Last Week

Last Month

Last Year

GitHub Statistics

MIT License

109 Stars

48 Commits

12 Forks

3 Watchers

1 Branches

3 Contributors

Updated on Mar 09, 2025

Maintainers

View All 3 Contributors

Package Meta Information

Latest Version

1.2.4

Package Id

vue3-click-away@1.2.4

Unpacked Size

14.37 kB

Size

4.14 kB

File Count

NPM Version

7.21.0

Node Version

16.8.0

Total Downloads

Cumulative downloads

Total Downloads

NaN

Last Day

NaN

Compared to previous day

Last Week

NaN

Compared to previous week

Last Month

NaN

Compared to previous month

Last Year

NaN

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dev Dependencies

@babel/core @babel/plugin-transform-arrow-functions rollup rollup-plugin-babel rollup-plugin-copy vitepress

Vue Click Away

Demo is available using VitePress and is included in this repository. See Demo Section on how to use and the reason why it's not live yet.

Vue 3.0 Compatible Click Away Directive

GitHub issues NPM GitHub contributors GitHub code size in bytes

Example 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

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.

1import { createApp } from "vue";
2import App from "./App.vue";
3import VueClickAway from "vue3-click-away";
4
5const app = createApp(App);
6
7app.use(VueClickAway) // Makes 'v-click-away' directive usable in every component
8app.mount('#app')

With Options API

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

or with Vue Composition API & Typescript

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

Directive

1<template>
2  <div v-click-away="onClickAway">
3    ...
4  </div>
5</template>

1import { directive } from "vue3-click-away";
2export default {
3  directives: {
4    ClickAway: directive
5  },
6  methods: {
7    onClickAway(event) {
8      console.log(event);
9    }
10  }
11}

Mixin

1<template>
2  <div v-click-away="onClickAway">
3    ...
4  </div>
5</template>

1import { mixin as VueClickAway } from "vue3-click-away";
2export default {
3  mixins: [VueClickAway],
4  methods: {
5    onClickAway(event) {
6      console.log(event);
7    }
8  }
9}

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

No vulnerabilities found.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

License

Determines if the project has defined a license.

1

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Maintained

Determines if the project is "actively maintained".

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Reason

56 existing vulnerabilities detected

Details

Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8
Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
Warn: Project is vulnerable to: GHSA-qxrj-hx23-xp82
Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw
Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw
Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
Warn: Project is vulnerable to: GHSA-67mh-4wv8-2f99
Warn: Project is vulnerable to: GHSA-74fj-2j2h-c42q
Warn: Project is vulnerable to: GHSA-pw2r-vq6v-hr8c
Warn: Project is vulnerable to: GHSA-jchw-25xp-jwwc
Warn: Project is vulnerable to: GHSA-cxjh-pqwp-8mfp
Warn: Project is vulnerable to: GHSA-ww39-953v-wcq6
Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h
Warn: Project is vulnerable to: GHSA-593f-38f6-jp5m
Warn: Project is vulnerable to: GHSA-x2rg-q646-7m2v
Warn: Project is vulnerable to: GHSA-76p3-8jx3-jpfq
Warn: Project is vulnerable to: GHSA-3rfm-jhwj-7488
Warn: Project is vulnerable to: GHSA-hhq3-ff78-jv3g
Warn: Project is vulnerable to: GHSA-29mw-wpgm-hmr9
Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm
Warn: Project is vulnerable to: GHSA-6vfc-qv3f-vr6c
Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3
Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h
Warn: Project is vulnerable to: GHSA-5rrq-pxf6-6jx5
Warn: Project is vulnerable to: GHSA-8fr3-hfg3-gpgp
Warn: Project is vulnerable to: GHSA-gf8q-jrpm-jvxq
Warn: Project is vulnerable to: GHSA-2r2c-g63r-vccr
Warn: Project is vulnerable to: GHSA-cfm4-qjh2-4765
Warn: Project is vulnerable to: GHSA-x4jg-mjrx-434g
Warn: Project is vulnerable to: GHSA-hj48-42vr-x3v9
Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j
Warn: Project is vulnerable to: GHSA-566m-qj78-rww5
Warn: Project is vulnerable to: GHSA-hwj9-h5mp-3pm3
Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j
Warn: Project is vulnerable to: GHSA-h4hr-7fg3-h35w
Warn: Project is vulnerable to: GHSA-gj77-59wh-66hg
Warn: Project is vulnerable to: GHSA-hqhp-5p83-hx96
Warn: Project is vulnerable to: GHSA-3949-f494-cm99
Warn: Project is vulnerable to: GHSA-x7hr-w5r2-h6wg
Warn: Project is vulnerable to: GHSA-gcx4-mw62-g8wm
Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
Warn: Project is vulnerable to: GHSA-4wf5-vphf-c2xc
Warn: Project is vulnerable to: GHSA-mv48-hcvh-8jj8
Warn: Project is vulnerable to: GHSA-353f-5xf4-qw67
Warn: Project is vulnerable to: GHSA-64vr-g452-qvp3
Warn: Project is vulnerable to: GHSA-9cwx-2883-4wfx
Warn: Project is vulnerable to: GHSA-vg6x-rcgg-rjx6
Warn: Project is vulnerable to: GHSA-x574-m823-4x7w
Warn: Project is vulnerable to: GHSA-4r4m-qw57-chr8
Warn: Project is vulnerable to: GHSA-xcj6-pq6g-qj4x
Warn: Project is vulnerable to: GHSA-356w-63v5-8wf4
Warn: Project is vulnerable to: GHSA-859w-5945-r5v3
Warn: Project is vulnerable to: GHSA-6fc8-4gx4-v693
Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q

Score

1.9

/10

Last Scanned on 2025-07-07

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More