Vue.js: Custom Directives

// directives/permission.js
export const permission = {
  mounted(el, binding) {
    const { value } = binding  // 'user.create'
    const userPermissions = getCurrentUser().permissions || []
    
    if (!userPermissions.includes(value)) {
      el.parentNode?.removeChild(el)  // remove it when there is no permission
    }
  }
}

// main.js
import { permission } from './directives/permission'
app.directive('permission', permission)

// 2. Shorthand (mounted + updated)
app.directive('color', (el, binding) => {
  el.style.color = binding.value
})

app.directive('demo', {
  // 1. created (directive created)
  created(el, binding) {
    console.log('1. directive created')
  },
  
  // 2. beforeMount (before the element is mounted)
  beforeMount(el) {
    console.log('2. before mount')
  },
  
  // 3. mounted (element mounted) ⭐ most used
  mounted(el, binding) {
    console.log('3. mounted')
  },
  
  // 4. beforeUpdate (before a dependency changes)
  beforeUpdate(el, binding) {
    console.log('4. before update')
  },
  
  // 5. updated (after a dependency changed)
  updated(el, binding) {
    console.log('5. updated')
  },
  
  // 6. beforeUnmount (before unmounting)
  beforeUnmount(el) {
    console.log('6. before unmount')
  },
  
  // 7. unmounted (after unmounting) ⭐ use it for cleanup
  unmounted(el) {
    console.log('7. unmounted')
  }
})

// 4 arguments: el, binding, vnode, prevVnode
mounted(el, binding, vnode, prevVnode) {
  // el: the element the directive is bound to
  el.style.color = 'red'
  
  // binding: the directive information object
  binding.value    // directive value, e.g. v-foo="bar" → bar
  binding.arg      // argument, e.g. v-foo:arg → 'arg'
  binding.modifiers  // modifiers, e.g. v-foo.bar → { bar: true }
  binding.instance  // the component instance using the directive
  binding.dir       // the directive definition object
  
  // vnode: Vue virtual node (rarely needed)
  // prevVnode: the previous virtual node
}

Three swatch buttons on top ("#ffe08a / #a5d8ff / #b2f2bb"); both lines below start with a pale-yellow background, the second one bold.
Click "#a5d8ff" → both backgrounds turn pale blue; the first line stays at normal weight while the second stays bold — the .bold modifier only affects the element it is attached to.
Click "#b2f2bb" → both lines turn pale green.

const { createApp } = Vue
const app = createApp({})

// 1. v-show (controls display)
app.directive('show', {
  mounted(el, binding) { el.style.display = binding.value ? '' : 'none' },
  updated(el, binding) { el.style.display = binding.value ? '' : 'none' }
})

// 2. v-text (sets textContent)
app.directive('text', {
  mounted(el, binding) { el.textContent = binding.value },
  updated(el, binding) { el.textContent = binding.value }
})

// 3. v-html (sets innerHTML, XSS risk)
app.directive('html', {
  mounted(el, binding) { el.innerHTML = binding.value },
  updated(el, binding) { el.innerHTML = binding.value }
})

Re-implements three of Vue's built-in directives by hand.
Rendering v-show="false" hides the element with display: none, v-text replaces the element's text, and v-html injects raw markup — which is exactly why v-html must never receive unsanitized user input.

v-show="false"  -> <div style="display: none">
v-text="'Hi'"   -> <div>Hi</div>
v-html="'<b>x</b>'" -> <div><b>x</b></div> (raw HTML is injected, XSS risk)

// directives/focus.js
export const focus = {
  mounted(el, binding) {
    if (binding.value !== false) {
      el.focus()
    }
  }
}

// directives/permission.js
import { getCurrentUser } from '@/utils/auth'

export const permission = {
  mounted(el, binding) {
    const { value, modifiers } = binding
    const user = getCurrentUser()
    
    // value: the string 'user.create' or the array ['user.create', 'user.delete']
    // modifiers.disable: disable instead of removing
    const required = Array.isArray(value) ? value : [value]
    const hasPermission = required.every(p => 
      user.permissions?.includes(p)
    )
    
    if (!hasPermission) {
      if (modifiers.disable) {
        el.disabled = true
        el.title = 'No permission'
      } else {
        el.parentNode?.removeChild(el)
      }
    }
  }
}

// directives/debounce.js
export const debounce = {
  mounted(el, binding) {
    const { value, arg = 300 } = binding
    
    if (typeof value !== 'function') {
      console.warn('v-debounce: value must be a function')
      return
    }
    
    let timer = null
    el.__debounceTimer__ = timer
    
    el.addEventListener('click', () => {
      clearTimeout(timer)
      timer = setTimeout(() => value(), arg)
      el.__debounceTimer__ = timer
    })
  },
  
  unmounted(el) {
    if (el.__debounceTimer__) {
      clearTimeout(el.__debounceTimer__)
    }
  }
}

// directives/copy.js
export const copy = {
  mounted(el, binding) {
    const handler = async () => {
      try {
        await navigator.clipboard.writeText(binding.value)
        const original = el.textContent
        el.textContent = 'Copied!'
        setTimeout(() => { el.textContent = original }, 1500)
      } catch (err) {
        console.error('Copy failed:', err)
      }
    }
    el.addEventListener('click', handler)
    el.__copyHandler__ = handler
  },
  
  unmounted(el) {
    if (el.__copyHandler__) {
      el.removeEventListener('click', el.__copyHandler__)
    }
  }
}

// directives/lazyLoad.js
export const lazyLoad = {
  mounted(el, binding) {
    const observer = new IntersectionObserver(([entry]) => {
      if (entry.isIntersecting) {
        el.src = binding.value
        observer.unobserve(el)
      }
    })
    observer.observe(el)
    el.__observer__ = observer
  },
  
  unmounted(el) {
    el.__observer__?.disconnect()
  }
}

<!-- 1. v-directive="value" (value) -->
<input v-foo="username">

<!-- 2. v-directive:arg (argument, a fixed string) -->
<input v-foo:delay="500">

<!-- 3. v-directive.modifier (modifier, a boolean object) -->
<input v-foo.bar>

<!-- 4. Combined -->
<input v-foo:delay.bar="500">

app.directive('demo', (el, binding) => {
  // v-demo="123"
  binding.value  // 123
  
  // v-demo:abc
  binding.arg  // 'abc'
  
  // v-demo.foo
  binding.modifiers  // { foo: true }
  
  // v-demo:abc.foo="123"
  binding.value    // 123
  binding.arg       // 'abc'
  binding.modifiers // { foo: true }
})

<!-- Scenario 1: v-permission:disable -->
<button v-permission:disable="'user.create'">
  <!-- arg='disable', value='user.create' -->
</button>

<!-- Scenario 2: v-debounce:500 -->
<button v-debounce:500="handler">
  <!-- arg='500' (a 500ms debounce) -->
</button>

<!-- Scenario 3: v-once.lazy -->
<img v-once.lazy="imageUrl">
<!-- modifiers.lazy=true, value=imageUrl -->
</template>

Three demo blocks render at once.
The first input receives focus as soon as the page opens, the second one 500 ms later.
The Copy link button swaps its label to Copied! for 1.5 seconds after every click.
The save button runs handleSave only once per 800 ms burst, so clicking it three times quickly increments the counter by exactly 1.

v-focus (auto focus)        -> input 1 focused on load, input 2 focused after 500 ms
v-copy (click to copy)      -> button label: Copy link -> Copied! -> Copy link (1.5 s later)
v-debounce:800 (debounce)   -> 3 rapid clicks => Actual trigger count: 1

A five-row troubleshooting table that maps each failure mode to its symptom and its fix, so you can diagnose most directive bugs by matching what you see on screen.

Renders one table: 5 rows x 3 columns (Mistake | Symptom | Fix).
No interactive elements, no console output.

A single five-row comparison table.
Reading down the "Best For" column tells you which tool fits a given need;
the star ratings are qualitative, not measured benchmarks.

Renders one table: 5 rows x 4 columns (Approach | Reusability | Performance | Best For).