{"id":12347,"library":"vdirs","title":"Vue Helper Directives (vdirs)","description":"vdirs is a specialized collection of utility directives designed exclusively for Vue 3 applications, currently available at version 0.1.8. It offers practical functionalities such as `v-zindexable` for automated z-index management of elements, `v-clickoutside` to detect clicks occurring outside of a bound element, and `v-mousemoveoutside` for similar mouse movement detection. While an explicit release cadence isn't defined, typical for smaller utility libraries, updates are likely driven by bug fixes or feature additions. Its primary advantage lies in providing ready-to-use, commonly required UI interaction patterns, which helps to minimize boilerplate code and ensure consistent behavior across a Vue project. The library includes comprehensive TypeScript type definitions, significantly improving development experience in typed environments.","status":"active","version":"0.1.8","language":"javascript","source_language":"en","source_url":null,"tags":["javascript","typescript"],"install":[{"cmd":"npm install vdirs","lang":"bash","label":"npm"},{"cmd":"yarn add vdirs","lang":"bash","label":"yarn"},{"cmd":"pnpm add vdirs","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required as a peer dependency for all directives to function within a Vue 3 application.","package":"vue","optional":false}],"imports":[{"note":"All directives are exported as named exports. There is no default export from the 'vdirs' package.","wrong":"import zindexable from 'vdirs'","symbol":"zindexable","correct":"import { zindexable } from 'vdirs'"},{"note":"This library is primarily designed for ESM environments. While CJS might work via transpilation, direct CommonJS require() is not the intended or recommended usage. Ensure your build setup supports ESM.","wrong":"const { clickoutside } = require('vdirs')","symbol":"clickoutside","correct":"import { clickoutside } from 'vdirs'"},{"note":"While `import * as vdirs` would work, it's generally recommended to import specific directives by name for better tree-shaking and clearer code.","wrong":"import * as vdirs from 'vdirs'","symbol":"mousemoveoutside","correct":"import { mousemoveoutside } from 'vdirs'"}],"quickstart":{"code":"\n\n\n\n","lang":"typescript","description":"This example demonstrates how to integrate and use the `v-zindexable` and `v-clickoutside` directives within a Vue 3 component. It shows a basic modal that gains dynamic z-index management and closes when clicked outside."},"warnings":[{"fix":"Always pin exact versions (e.g., `\"vdirs\": \"0.1.8\"`) or use a lockfile and thoroughly review changes when updating.","message":"The package is currently in a 0.1.x version range, which implies that API stability is not guaranteed. Any minor or patch release could potentially introduce breaking changes without a major version increment.","severity":"breaking","affected_versions":"<1.0.0"},{"fix":"Ensure your project's Vue 3 version strictly adheres to the peer dependency requirements specified in `package.json`.","message":"The library explicitly lists `Vue: ^3.0.11` as a peer dependency. Using older Vue 3 versions or significantly newer beta/RC versions might lead to unexpected behavior or runtime errors.","severity":"gotcha","affected_versions":"<=0.1.8"},{"fix":"Add the desired directives to the `directives` option of your Vue component or register them globally via `app.directive('directive-name', directive)`.","message":"Like all Vue custom directives, `vdirs` directives must be explicitly registered globally or locally within components using the `directives` option. Forgetting to register them will prevent them from working.","severity":"gotcha","affected_versions":">=0.1.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure `zindexable` is imported and added to the `directives` object within your Vue component options (e.g., `directives: { zindexable }`) or registered globally during app initialization.","cause":"The `zindexable` directive was used in a template but not registered in the component's `directives` option or globally.","error":"[Vue warn]: Failed to resolve directive: zindexable"},{"fix":"Update your Vue 3 installation to a version compatible with `^3.0.11` (e.g., `npm install vue@^3.0.11`) or adjust the `vdirs` version if a compatible one exists for your Vue version.","cause":"Your project's installed version of Vue does not satisfy the peer dependency requirement of `vdirs`.","error":"npm ERR! code ERESOLVE\nnpm ERR! ERESOLVE could not resolve\nnpm ERR! peer vue@\"^3.0.11\" from vdirs@0.1.8"},{"fix":"Verify that the value passed to the directive (e.g., `v-clickoutside=\"myFunction\"`) is a valid function or expression that evaluates to a function, and that any reactive data it depends on is correctly defined and accessible.","cause":"This error can occur if a directive like `v-clickoutside` expects a function handler but receives an undefined or null value, often due to a typo or incorrect data binding.","error":"TypeError: Cannot read properties of undefined (reading 'handler')"}],"ecosystem":"npm"}