Velocity is not defined: VUEJS

493 Views Asked by At

I am trying to use Velocity.js with my Vuejs but it gives me the error Velocity not defined:

This is my Vuejs Code:

<div class="anim_container">
    <transition @before-enter="beforeEnter" @enter="enter" appear>
      <div class="icon icon_phone" delay="0" left="100"></div>
    </transition>
</div>

and

methods: {
    beforeEnter(el) {
      el.style.left = "-200px";
      el.style.opacity = 0;
    },
    enter(el, done) {
      let delay = parseInt(el.getAttribute("delay"));
      let left = parseInt(el.getAttribute("left"));
      console.log(el);
      Velocity(
        el,
        { opacity: 1, left },
        { delay, duration: 2000, complete: done }
      );
    }
  }

I've also tried to use it through npm package

import Velocity from 'velocity-animate';

Vue.use(Velocity);

It does not work either.

1

There are 1 best solutions below

0
Yu Xiao On

Velocity is not built as vue plugins, so you should not Vue.use() it, just directly import it in your component file and use it normally.