agent-skills/skills/vue-best-practices/reference/directive-function-shorthand.md

title, impact, impactDescription, type, tags

title	impact	impactDescription	type	tags
Use Function Shorthand for Simple Directives	LOW	Function shorthand reduces boilerplate for directives with identical mounted/updated behavior	best-practice	vue3 directives shorthand code-style

Use Function Shorthand for Simple Directives

Impact: LOW - It's common for a custom directive to have the same behavior for mounted and updated, with no need for other hooks. In such cases, you can define the directive as a function instead of an object, reducing boilerplate and improving readability.

The function will be called for both mounted and updated lifecycle hooks.

Task Checklist

• Use function shorthand when mounted and updated behavior is identical
• Use object syntax when you need beforeMount, beforeUpdate, or unmounted hooks
• Use object syntax when mounted and updated have different logic

Verbose (when not needed):

// VERBOSE: Full object when behavior is identical
const vColor = {
  mounted(el, binding) {
    el.style.color = binding.value
  },
  updated(el, binding) {
    el.style.color = binding.value  // Same as mounted
  }
}

const vHighlight = {
  mounted(el, binding) {
    el.style.backgroundColor = binding.value || 'yellow'
  },
  updated(el, binding) {
    el.style.backgroundColor = binding.value || 'yellow'  // Duplicated
  }
}

// Global registration - verbose
app.directive('pin', {
  mounted(el, binding) {
    el.style.position = 'fixed'
    el.style.top = binding.value + 'px'
  },
  updated(el, binding) {
    el.style.position = 'fixed'
    el.style.top = binding.value + 'px'
  }
})

Concise (function shorthand):

// CONCISE: Function shorthand
const vColor = (el, binding) => {
  el.style.color = binding.value
}

const vHighlight = (el, binding) => {
  el.style.backgroundColor = binding.value || 'yellow'
}

// Global registration - concise
app.directive('pin', (el, binding) => {
  el.style.position = 'fixed'
  el.style.top = binding.value + 'px'
})

With script setup

<script setup>
// Function shorthand for local directives
const vFocus = (el) => {
  el.focus()
}

const vColor = (el, binding) => {
  el.style.color = binding.value
}

const vPin = (el, binding) => {
  el.style.position = binding.modifiers.absolute ? 'absolute' : 'fixed'
  const position = binding.arg || 'top'
  el.style[position] = binding.value + 'px'
}
</script>

<template>
  <input v-focus />
  <p v-color="'red'">Colored text</p>
  <div v-pin:left.absolute="100">Positioned element</div>
</template>

When to Use Object Syntax

Use the full object syntax when:

1. You Need Cleanup (unmounted hook)

// Need object syntax for cleanup
const vClickOutside = {
  mounted(el, binding) {
    el._handler = (e) => {
      if (!el.contains(e.target)) binding.value(e)
    }
    document.addEventListener('click', el._handler)
  },
  unmounted(el) {
    document.removeEventListener('click', el._handler)
  }
}

2. Different Logic for mounted vs updated

// Need object syntax for different behavior
const vLazyLoad = {
  mounted(el, binding) {
    // Initial setup - create observer
    el._observer = new IntersectionObserver(entries => {
      if (entries[0].isIntersecting) {
        el.src = binding.value
        el._observer.disconnect()
      }
    })
    el._observer.observe(el)
  },
  updated(el, binding, vnode, prevVnode) {
    // Only update if value actually changed
    if (binding.value !== binding.oldValue) {
      el.src = binding.value
    }
  },
  unmounted(el) {
    el._observer?.disconnect()
  }
}

3. You Need beforeMount or beforeUpdate

// Need object syntax for early lifecycle hooks
const vAnimate = {
  beforeMount(el) {
    el.style.opacity = '0'
  },
  mounted(el) {
    requestAnimationFrame(() => {
      el.style.transition = 'opacity 0.3s'
      el.style.opacity = '1'
    })
  },
  beforeUpdate(el) {
    el.style.opacity = '0.5'
  },
  updated(el) {
    el.style.opacity = '1'
  }
}

Object Literal Values with Function Shorthand

Function shorthand works well with object literal values:

const vDemo = (el, binding) => {
  console.log(binding.value.color)  // => "white"
  console.log(binding.value.text)   // => "hello!"

  el.style.color = binding.value.color
  el.textContent = binding.value.text
}

<template>
  <div v-demo="{ color: 'white', text: 'hello!' }"></div>
</template>

Reference

• Vue.js Custom Directives - Function Shorthand