How to import anime.js to my Vue project?

Question

I have a question regarding importing an anime.js into my vue project. I am using vue cli. How do I include animejs to my project? I tried it this way:

import anime from 'animejs'
Vue.use(anime);

but I get an error in the console that says:

Uncaught TypeError: a.hasOwnProperty is not a function. . .

can you guys help me?

Answer 1

Vue.use() is used only for plugins designed for Vue.js. You can't simply add a library there, it won't work.

My suggestion is that you create that plugin and use it on your project to make anime.js acessible everywhere.

You could do it like this:

//vue-anime.js
import anime from 'animejs';

const VueAnime = {
  install (Vue, options) {
    Vue.prototype.$animeJS = anime;
  }
}

export default VueAnime

Then later

import VueAnime from './vue-anime';
Vue.use(VueAnime);

Now every Vue component will be able to use anime acessing this.$animeJS.

Answer 2

Or simply -

import Vue from "vue";
import anime from 'animejs/lib/anime.min.js';

Vue.prototype.$anime = anime;

Then this.$anime in all components