Ocelot-Social/webapp/plugins/vue-directives.js

import Vue from 'vue'

export default ({ app }) => {
  Vue.directive('focus', {
    // When the bound element is inserted into the DOM...
    inserted: (el, binding) => {
      // Focus the element
      Vue.nextTick(() => {
        if (binding.value !== false) {
          let target = el
          const isInput = target instanceof HTMLInputElement
          if (!isInput) {
            target = el.querySelector('input')
          }
          if (target && typeof target.focus === 'function') {
            target.focus()
          }
        }
      })
    },
  })

  Vue.directive('router-link', {
    bind: (el, binding) => {
      binding.clickEventListener = (e) => {
        if (!e.metaKey && !e.ctrlKey) {
          e.preventDefault()
          app.router.push(el.getAttribute('href'))
        }
      }
      el.addEventListener('click', binding.clickEventListener)
    },
    unbind: (el, binding) => {
      // cleanup
      if (binding.clickEventListener) {
        el.removeEventListener('click', binding.clickEventListener)
      }
    },
  })
}