[Vuejs]-Callable function available globally on Vue app

by

0👍

✅

If you set

Vue.prototype.$animateCss = function(element, animationName, callback) {
  const node = document.querySelector(element)
  node.classList.add('animated', animationName)

  function handleAnimationEnd() {
      node.classList.remove('animated', animationName)
      node.removeEventListener('animationend', handleAnimationEnd)

      if (typeof callback === 'function') callback()
  }

  node.addEventListener('animationend', handleAnimationEnd);
}

before creating your App, you’ll be able to use this.$animateCss in all of your components.

You might also want to read up on (Global) Mixins that provide this functionality in a more flexible way.

Leave a comment