4

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?

David Walschots
  • 12,279
  • 5
  • 36
  • 59
Brayn Brigoli
  • 63
  • 1
  • 6
  • 1
    `Vue.use()` is used only for plugins designed for Vue.js. You can't just throw it there like this. – Phiter Mar 13 '18 at 14:10
  • Can you please help me on this? Do I have to import animejs on every component? There is probably a better way right? – Brayn Brigoli Mar 13 '18 at 14:15
  • Yes you have to import it in every component that will use it. – Phiter Mar 13 '18 at 14:16
  • Or you can create a Vue.js plugin and then you'll be able to use `Vue.use()`. Here is how you create plugins: https://vuejs.org/v2/guide/plugins.html – Phiter Mar 13 '18 at 14:18
  • I see.I haven't touched on the vue plugins yet. Maybe i'll come to this problem when i get to learn more. – Brayn Brigoli Mar 13 '18 at 14:22

5 Answers5

5

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.

Phiter
  • 14,570
  • 14
  • 50
  • 84
  • Hi! Tried the code above. But why do I get undefined when I console.log(this.$animeJS) in one of the component? – Brayn Brigoli Mar 13 '18 at 21:56
  • Well this depends on a lot of stuff. It depends mostly on how your project looks like. My code is a basis for what you'll need to do. – Phiter Mar 13 '18 at 21:58
  • can you check my code pls? https://github.com/ilbrigz/Vue-vue . Still a newbie and struggling. I really need some help at times or ill just end up leaving unsolved problems – Brayn Brigoli Mar 13 '18 at 22:12
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

Spotd
  • 21
  • 3
1

@Phiter's answer looked good at first, but I wasn't able to get it to work in my vue-cli 3 environment. The below code worked though, so I think it may work for you. This is just a simple way to install an external library into your Vue app and expose it through a prototype:

// animejs.js
import anime from 'animejs'

const install = (Vue, options) => {
    Vue.prototype.$animejs = anime
}

export default install

// Then, in your main.js (at least for me)
import VueAnime from './animejs'
Vue.use(VueAnime)

Now, when you need to access the library, just use this.$animejs in your project.

Community
  • 1
  • 1
adstwlearn
  • 720
  • 7
  • 9
0

or simply like this in main.js after npm install:

import anime from 'animejs';
Object.defineProperty(Vue.prototype, '$anime', { value: anime });

then use this.$anime tu use it.

K. Younes
  • 34
  • 4
0

To use AnimeJS globally in Vue 3 project, just create a plugin (plugins/anime.js):

import anime from 'animejs';

export default {
  install(app, options) {
    app.config.globalProperties.$anime = anime;
  },
};

Then include it (main.js or elsewhere):

import VueAnime from './plugins/anime';

createApp(App)
  .use(VueAnime)
  .mount('#app');

And now, it's accessible everywhere by this.$anime.

Please notice that a minor change from the previous version is installing the plugin for Vue 3.

swolfish
  • 771
  • 1
  • 9
  • 25