jsfiddle demo is broken

[shershen08]

this demo - https://jsfiddle.net/heatherbooker/13uf74vh/

results in

Uncaught TypeError: Cannot read property 'directive' of undefined
    at stickyScroll.js:10
    at stickyScroll.js:74
47vue.js:525 [Vue warn]: Failed to resolve directive: sticky-scroll 
(found in anonymous component - use the "name" option for better debugging messages.)
warn @ vue.js:525

[heatherbooker]

yes! :( I just discovered this while trying to fix the other bug that deals with the upgrade to Vue 2.0. I'm not sure what's up, but I'm working on it. Thanks for letting me know!

[shershen08]

If I find out the reason I'll keep you posted

[Cyrille37]

Hi Perhaps a way :

To make it works in my Firefox browser I had to comment the 2 tries:

• try { var Vue = require('vue'); ...
• try { module.exports = vueStickyScroll; ...

Also, added some change to make it works with VUE 2 : removed "me" aka "this" and "arg", replace them with "el" and "binding" from new method signature "bind: function(el, binding)"

Sorry, no time to propose a PR, so here are my changes:

(function() {
/*
  // if we are in node.js enviro, require vue
  try {
    var Vue = require('vue');
  } catch (e) {
    // no worries, in browser enviro Vue should already be global
  }
*/
  var vueStickyScroll = Vue.directive('sticky-scroll', {
	  
    bind: function(el, binding) {

    	console.log('sticky-scroll bind()');
    	console.log(el);

    	var arg = binding.expression ;
    	
      //use browser MutationObserver object
      var observer = new MutationObserver(scrollToBottom);
      //looking for new children that will change the height
      var config = { childList: true };
      observer.observe(el, config);

      function animateScroll(duration) {

        var start = el.scrollTop;
        var end = el.scrollHeight;
        var change = end - start;
        var increment = 20;

        function easeInOut(currentTime, start, change, duration) {
          //by Robert Penner
          currentTime /= duration / 2;
          if (currentTime < 1) {
            return change / 2 * currentTime * currentTime + start;
          }
          currentTime -= 1;
          return -change / 2 * (currentTime * (currentTime - 2) - 1) + start;
        }

        function animate(elapsedTime) {

          elapsedTime += increment;
          var position = easeInOut(elapsedTime, start, change, duration);
          el.scrollTop = position;

          if (elapsedTime < duration) {
            setTimeout(function() {
              animate(elapsedTime);
            }, increment)
          }
        }
        animate(0);
      }

      function scrollToBottom() {
        if (arg === 'animate') {
          //default is 300
          var duration = Number(expression) || 300;
          animateScroll(duration);
        } else {

        	console.log('sticky-scroll scrollToBottom()');
          //default is jump to bottom
          el.scrollTop = el.scrollHeight;
        }
      }
    }
  });
/*
  // check whether we are in node.js enviro
  try {
    module.exports = vueStickyScroll;
  } catch (e) {
    // no worries, our directive will just be registered in browser
  }
*/
})();

Cheers