Directix Playground

Configure directives interactively and generate code for Vue 2, Vue 3, composables, and Nuxt.

🎯 Code Generator v-debounce

Debounce function execution

v-click-outside v-debounce v-throttle v-long-press v-hover v-hotkey v-click-delay v-click-wave v-context-menu v-copy v-lazy v-intersect v-visible v-loading v-blur v-skeleton v-scroll v-infinite-scroll v-sticky v-parallax v-progress v-ripple v-truncate v-ellipsis v-uppercase v-lowercase v-capitalcase v-number v-money v-trim v-tooltip v-draggable v-image-preview v-countdown v-watermark v-print v-focus v-mask v-permission v-sanitize v-resize v-mutation v-virtual-list v-touch v-swipe v-pan v-pinch v-rotate-gesture v-pull-refresh v-fade v-typewriter v-counter v-lottie v-export v-highlight v-fullscreen v-emoji

Vue

<template>
  <div v-debounce="{
    handler: 'handleInput',
    wait: 300,
    leading: false,
    trailing: true
  }">
    <!-- Debounce function execution -->
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

// Directive options
const options = {
  handler: 'handleInput',
    wait: 300,
    leading: false,
    trailing: true
}
</script>

Event · debounce View API Docs →

Quick Start

1. Select a Directive - Choose from 57+ directives organized by category
2. Choose Vue Version - Toggle between Vue 2 and Vue 3
3. Select Output Format - Directive syntax or Composable function
4. Copy Code - Click copy and paste into your project

Features

• 57+ Directives - Full coverage of all Directix directives
• 41+ Composables - Composable API for every directive
• Vue 2 & Vue 3 - Generate code for either version
• TypeScript Ready - Full type definitions included
• 15 Categories - Organized by use case

Categories

Category	Description	Directives
Event	Event handling	v-click-outside, v-debounce, v-throttle, v-long-press, v-hover, v-hotkey, v-click-delay, v-click-wave, v-context-menu, v-copy
Visibility	Visibility control	v-lazy, v-intersect, v-visible, v-loading, v-blur, v-skeleton
Scroll	Scroll behavior	v-scroll, v-infinite-scroll, v-sticky, v-parallax, v-progress
Interaction	User interaction	v-ripple
Format	Text formatting	v-uppercase, v-lowercase, v-capitalcase, v-number, v-money, v-truncate, v-ellipsis, v-trim
UI	UI enhancements	v-tooltip, v-draggable, v-image-preview, v-countdown, v-watermark, v-print
Form	Form handling	v-focus, v-mask
Security	Security features	v-permission, v-sanitize
Observer	DOM observation	v-resize, v-mutation
Performance	Performance optimization	v-virtual-list
Mobile	Touch & gestures	v-touch, v-swipe, v-pan, v-pinch, v-rotate-gesture, v-pull-refresh
Animation	Animations	v-fade, v-typewriter, v-counter, v-lottie
Data	Data handling	v-export, v-highlight
Media	Media controls	v-fullscreen
Input	Input processing	v-emoji

Usage Example

<template>
  <!-- Use generated directive code here -->
  <input v-debounce="{ handler: handleSearch, wait: 300 }" />
</template>

<script setup>
import { ref } from 'vue'

const searchText = ref('')

function handleSearch(event) {
  console.log('Searching:', event.target.value)
}
</script>

v1.11.0 Features

• 🏢 Enterprise Features - Permission management, audit logging, configuration center
• ⚡ Performance Optimization - Bundle size reduction, runtime performance improvements
• 🛡️ Security Enhancements - Advanced XSS protection, CSP compatibility
• 📊 Monitoring & Alerting - Performance metrics, health checks, alert rules

v2.0.0 Coming Soon

• 🧩 Web Components Support - Use directives with Custom Elements
• ⚡ Vue 3 Conditional Optimizations - markRaw, shallowReactive enhancements
• 🔄 Full Vue 2 Compatibility - Continued support for Vue 2.x

Resources

• Documentation - Full documentation
• API Reference - Complete API reference
• Examples - Real-world examples
• GitHub - Source code