Vue directives

 Vue.directive('click-outside', {
  bind(el, binding, vnode) {
    el.clickOutside = event => {
      if (!(el === event.target || el.contains(event.target))) {
        vnode.context[binding.expression](event);
      }
    };
    document.body.addEventListener('click', el.clickOutside);
    document.body.addEventListener('touchstart', el.clickOutside);
  },
  unbind(el) {
    document.body.removeEventListener('click', el.clickOutside);
    document.body.removeEventListener('touchstart', el.clickOutside);
  }
});

Vue.directive('toggle-class', {
  bind(el, binding) {
    el.addEventListener('click', () => {
      el.classList.toggle(binding.value);
    });
  },
  unbind(el, binding) {
    el.removeEventListener('click', () => {
      el.classList.toggle(binding.value);
    });
  }
});

Vue.directive('body-overflow', {
  update(el, binding) {
    if (binding.value) {
      document.body.style.top = `-${window.scrollY}px`;
      document.body.classList.add('body-overflow');
    } else {
      const Y = document.body.style.top || `-${window.scrollY}px`;
      document.body.classList.remove('body-overflow');
      document.body.style.top = '';
      window.scrollTo(0, parseInt(Y || '0', 2) * -1);
    }
  }
});