Vue - in-viewport directive (Intersection Observer)

main.js

Vue.directive("in-viewport", {
  inserted: function(el, binding) {
    if(!!window.IntersectionObserver){
      el.observer = new IntersectionObserver((entries, observer) => { 
        entries.forEach(entry => {
        if(entry.isIntersecting){
          if (typeof binding.value === "function"){
            binding.value();
          }
          entry.target.src = entry.target.dataset.src;
          if (binding.modifiers.once){
            el.observer.unobserve(entry.target);
          }
        }
        });
      }, {threshold: binding.modifiers.full ? 1 : 0});
      el.observer.observe(el);
    }
  },
  unbind: function(el){
    el.observer.disconnect();
  }
});

// USAGE
// <div v-in-viewport="functionNameToCall"></div>
//
// Available modifiers:
// .once - unbind after first function call
// .full - only fire the event if whole element is visible in viewport