How to create Custom Directives in Vue? | Vue.js Interview Questions

What You'll Learn

Directive hooks
Passing values
Directive arguments

Basic Custom Directive

code.jsJavaScript

// Global registration
app.directive('focus', {
  mounted: (el) => el.focus()
})

// Usage: <input v-focus>

Directive Hooks

code.jsJavaScript

const vHighlight = {
  created(el, binding, vnode, prevVnode) {},
  beforeMount(el, binding) {},
  mounted(el, binding) {},
  beforeUpdate(el, binding) {},
  updated(el, binding) {},
  beforeUnmount(el, binding) {},
  unmounted(el, binding) {}
}

Binding Object

code.jsJavaScript

const vColor = {
  mounted(el, binding) {
    // v-color:background.dark="'red'"
    console.log(binding.value)     // 'red'
    console.log(binding.arg)       // 'background'
    console.log(binding.modifiers) // { dark: true }

    el.style[binding.arg] = binding.value
  }
}

Practical Example

code.jsJavaScript

// Click outside directive
const vClickOutside = {
  mounted(el, binding) {
    el._clickOutside = (event) => {
      if (!el.contains(event.target)) {
        binding.value(event)
      }
    }
    document.addEventListener('click', el._clickOutside)
  },
  unmounted(el) {
    document.removeEventListener('click', el._clickOutside)
  }
}

// <div v-click-outside="closeMenu">