Directix Playground

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

Quick Code Generatorv-debounce - Debounce function execution

v-click-outside v-debounce v-throttle v-long-press v-hover v-hotkey v-click-delay v-copy v-focus v-mask v-trim v-uppercase v-lowercase v-capitalcase v-number v-money v-truncate v-ellipsis v-lazy v-intersect v-visible v-loading v-scroll v-infinite-scroll v-sticky v-permission v-sanitize v-ripple v-click-wave v-tooltip v-draggable v-context-menu v-fullscreen v-skeleton v-blur v-fade v-counter v-progress v-countdown v-watermark v-print v-export v-highlight

<template>
  <div v-debounce="options">
    <!-- Your content here -->
  </div>
</template>

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

// Configure directive options
const options = {
  // Add your configuration here
}
</script>

Quick Start

1. Select a Directive - Choose from the dropdown menu
2. Choose Vue Version - Toggle between Vue 2 and Vue 3
3. Select Output Format - Template syntax or Composable
4. Copy Code - Click copy and paste into your project

Features

• 57+ Directives - Full coverage of all Directix directives
• Vue 2 & Vue 3 - Generate code for either version
• Composables - Generate composable API code
• TypeScript Ready - Full type definitions included

Categories

Category	Description	Directives
Event	Event handling directives	v-click-outside, v-debounce, v-throttle, v-long-press, v-hover, v-hotkey, v-click-delay
Form	Form input directives	v-copy, v-focus, v-mask, v-trim
Format	Text formatting directives	v-uppercase, v-lowercase, v-capitalcase, v-number, v-money, v-truncate, v-ellipsis
Visibility	Visibility control	v-lazy, v-intersect, v-visible, v-loading
Scroll	Scroll behavior	v-scroll, v-infinite-scroll, v-sticky
Security	Security features	v-permission, v-sanitize
UI	UI enhancements	v-ripple, v-click-wave, v-tooltip, v-draggable, v-context-menu, v-fullscreen, v-skeleton, v-blur, v-fade
Data	Data visualization	v-counter, v-progress, v-countdown
Utility	Utility directives	v-watermark, v-print, v-export, v-highlight

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>

Resources

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