API Reference

This section provides detailed API documentation for all available directives in Directix.

Available Directives

Directix provides 32 production-ready directives organized into the following categories:

Event Directives

Directive	Description
v-click-outside	Detect clicks outside an element
v-debounce	Debounce event handlers
v-throttle	Throttle event handlers
v-long-press	Detect long press gestures
v-hover	Track hover state with callbacks
v-ripple	Material design ripple effect
v-touch	Touch gesture detection (swipe, pinch, rotate, tap)

Visibility Directives

Directive	Description
v-lazy	Lazy load images
v-intersect	Observe element intersection
v-visible	Toggle element visibility
v-loading	Show loading overlay
v-image-preview	Modal image preview with gestures

Scroll Directives

Directive	Description
v-scroll	Track scroll position
v-infinite-scroll	Infinite scroll loading
v-sticky	Sticky positioning

Form Directives

Directive	Description
v-copy	Copy text to clipboard
v-focus	Auto focus an element
v-mask	Input mask formatting
v-trim	Trim whitespace from input
v-capitalcase	Transform to capital case
v-lowercase	Transform to lowercase
v-uppercase	Transform to uppercase
v-money	Format as currency
v-number	Format and validate numbers

UI Directives

Directive	Description
v-tooltip	Display tooltips
v-draggable	Make elements draggable
v-truncate	Truncate text with ellipsis

Security Directives

Directive	Description
v-permission	Permission-based element control
v-sanitize	Sanitize HTML content

Observer Directives

Directive	Description
v-resize	Observe element resize
v-mutation	Observe DOM mutations

Installation Options

interface DirectiveInstallOptions {
  /** Register specific directives only */
  directives?: string[]
  /** Register all directives (default: true) */
  all?: boolean
  /** Global configuration for directives */
  config?: Record<string, any>
}

Import Methods

Named Import

import {
  vClickOutside,
  vCopy,
  vDebounce,
  vThrottle,
  vFocus,
  vLazy,
  vIntersect,
  vVisible,
  vLoading,
  vScroll,
  vInfiniteScroll,
  vSticky,
  vLongPress,
  vHover,
  vRipple,
  vMask,
  vPermission,
  vSanitize,
  vResize,
  vMutation,
  // New in v1.1.0
  vTouch,
  vImagePreview,
  vDraggable,
  vTooltip,
  vTruncate,
  vTrim,
  vCapitalcase,
  vLowercase,
  vUppercase,
  vMoney,
  vNumber,
} from 'directix'

Global Registration

import Directix from 'directix'

app.use(Directix)

Selective Registration

app.use(Directix, {
  directives: ['click-outside', 'copy', 'debounce', 'throttle', 'focus']
})

Utility Exports

Directix also exports utility functions:

import {
  // Type guards
  isString,
  isNumber,
  isBoolean,
  isFunction,
  isObject,
  isArray,
  isEmpty,
  isPromise,

  // Object utilities
  deepClone,
  deepMerge,
  get,
  set,

  // Time utilities
  parseTime,
  generateId,

  // Function utilities (aliased to avoid conflict with directives)
  debounceFn,
  throttleFn
} from 'directix'

Core Exports

For advanced usage, Directix exports core utilities:

import {
  // Vue version detection
  getVueVersion,
  setVueVersion,
  isVue2,
  isVue3,

  // Environment detection
  isBrowser,
  isSSR,

  // Feature support
  supportsPassive,
  supportsIntersectionObserver,
  supportsResizeObserver,
  supportsClipboard,
  supportsMutationObserver,

  // Directive definition
  defineDirective,
  defineDirectiveGroup
} from 'directix'