Registry / web-framework / vue-click-outside-element

vue-click-outside-element

library3.1.2jsnpmunverified

Vue-Click-Outside-Element is a specialized Vue directive designed to detect clicks that occur outside the DOM element it is applied to, rather than outside a Vue component. This distinction is crucial for scenarios where event delegation needs to target a specific HTML element. The current stable version is 3.1.2, which offers improved TypeScript typings and better testing, particularly for Vue 3. The package has seen recent updates, including a transition to Vite for building (v3.1.0) and significant refactoring for Vue 3 compatibility (v3.0.0). It is maintained with a clear roadmap, including plans to potentially combine element and component click-outside functionalities in the future. It's a lightweight solution focused solely on element-level click detection, differentiating it from more generalized event handling libraries or those specifically for component-level interaction.

web-framework

npm install vue-click-outside-element

github ↗package ↗

INSTALL

IMPORT

SIG · VUE-CLICK-OUTSIDE-

vue-click-outside-element

web-frameworkjavascriptv3.1.2

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

vueClickOutsideElement

✓ import vueClickOutsideElement from 'vue-click-outside-element'

✗ import { vueClickOutsideElement } from 'vue-click-outside-element'

The directive is exported as a default export for direct import and use with `app.use()` in Vue 3 applications.

Directive registration

✓ app.use(vueClickOutsideElement)

✗ app.directive('click-outside-element', vueClickOutsideElement)

Register the plugin globally via `app.use()`. The default directive name is `click-outside-element`, but it can be customized as a second argument to `app.use()`.

TypeScript Type

✓ import type { App } from 'vue'

While the package ships its own types, you might import `App` or other Vue types for type-checking your Vue application setup. The directive itself is typed for usage.

This quickstart demonstrates how to install and register the `v-click-outside-element` directive globally, then apply it to a button. Clicking anywhere outside the button will trigger the `closeButton` method, hiding the button. A secondary button allows you to bring the original button back into view.

import { createApp } from 'vue'; import vueClickOutsideElement from 'vue-click-outside-element'; // App.vue (within a single file component or separate) const App = { template: ` <div id="app"> <button v-click-outside-element="closeButton" v-if="showButton" style="padding: 10px; background-color: lightblue;">Click outside me to hide</button> <p v-else>Button is hidden. Click anywhere to reset.</p> <button @click="showButton = true" v-if="!showButton" style="margin-top: 20px;">Show Button Again</button> </div> `, data() { return { showButton: true }; }, methods: { closeButton(event) { console.log('Clicked outside the button!', event.target); this.showButton = false; } } }; const app = createApp(App); app.use(vueClickOutsideElement); app.mount('#app');

Debug

Known issues

breakingVersion 3.0.0 introduced breaking changes for Vue 3 compatibility. Directive hook methods changed from `bind` to `beforeMount` and `unbind` to `beforeUnmount`. Ensure your application is using Vue 3 when upgrading to `vue-click-outside-element@3.x.x`.

fix

For Vue 3 projects, use `npm i vue-click-outside-element`. For Vue 2, explicitly install `npm i vue-click-outside-element@1.0.15`.

affects: >=3.0.0

gotchaThis directive is specifically designed for detecting clicks outside an *element*, not a *component*. If you need to detect clicks outside an entire Vue component, you should use a different package like `Vue-Click-Outside-Component` (from the same author) or implement a custom solution that targets the component's root element.

fix

Verify whether you intend to detect clicks outside a specific HTML element or an entire Vue component. If the latter, consider `Vue-Click-Outside-Component` or adjust your implementation accordingly.

affects: >=1.0.0

gotchaThe directive `v-click-outside-element` expects a function reference from the component's `methods` object. Providing an inline function or an expression that doesn't resolve to a method will result in an error.

fix

Always pass a reference to a method defined in your Vue component's `methods` option, e.g., `<div v-click-outside-element="myMethod"></div>`.

affects: >=3.0.0

breakingThe internal `clickOutside` function was re-done in version 3.1.0 to take `this` as an argument instead of relying on `element.clickOutside` to be present. While this is primarily an internal refactor, it signifies architectural changes that may affect highly customized usages.

fix

No direct user-level fix is typically required unless you were relying on deeply internal implementation details. Ensure you are using the public API as documented.

affects: >=3.1.0

Errors

Common errors & fixes

Error: You need to provide a function for v-click-outside-element directive

The directive was applied with a value that is not a function, e.g., a string, a boolean, or an undefined variable.

fix

Ensure the value passed to `v-click-outside-element` is a reference to a valid method defined in your component's `methods` option, like `v-click-outside-element="myMethod"`.

Failed to resolve directive: click-outside-element

The directive has not been correctly registered with the Vue application instance.

fix

Make sure you have called `app.use(vueClickOutsideElement)` after importing the plugin in your `main.js` or equivalent entry file for your Vue 3 application.

TypeError: app.use is not a function

Attempting to use `app.use()` on a non-Vue 3 application instance or incorrectly importing `createApp`.

fix

Confirm you are working within a Vue 3 project structure and `createApp` is correctly imported from 'vue'. For Vue 2 projects, you should use `Vue.use(vueClickOutsideElement)` instead (after installing the Vue 2 compatible version).

Upgrade

Version history

3.1.2latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

11 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/ColtHands/Vue-Click-Outside-Element ↗

packagehttps://www.npmjs.com/package/vue-click-outside-element ↗