Loading external JS file within a vue component

Question

I am trying to use an external js file in my .vue file but get error:

[Vue warn]: Method "solarSystemAnimations" has type "object" in the component definition. Did you reference the function correctly?

found in

---> <SolarSystem> at src/views/SolarSystem.vue
       <App> at src/App.vue
         <Root>

I have the external js file at /src/assets/js/solarSystemAnimations:

export default $(window).load(function() {
  var body = $("body"),
    universe = $("#universe"),
    solarsys = $("#solar-system")

   ...
 };

and my .vue file looks like:

<template>
  <div class="solarSystem" @load="solarSystemAnimations">
    <div class="opening hide-UI view-2D zoom-large data-close controls-close">
....
</template>

<script>
import solarSystemAnimations from "@/assets/js/solarSystemAnimations.js";

export default {
  name: "SolarSystem",
  methods: {
    solarSystemAnimations: solarSystemAnimations
  }
};
</script>

I have looked thru numerous posts but nothing seems to work in my situation. Any help appreciated in advance.

Console.log solarSystemAnimations after importing it. You should find your mistake there. Vue is telling you it's not a function. — blackening
– blackening, Commented Jun 17, 2019 at 18:13
Ok I see solarSystemAnimations is an object in console but how can I keep it as a function? What am I not understanding thanks. — Alan
– Alan, Commented Jun 17, 2019 at 18:19
Export default function() { console.log('hello world') }. Start from there and modify. — blackening
– blackening, Commented Jun 17, 2019 at 18:28

Len Joseph · Accepted Answer · 2019-06-17 18:17:57Z

1

In Vue you typically use a lifecyle hook to invoke a function at a specific stage of DOM loading. Since you're referencing the window load, the Vue equivalent would be a mounted hook. You can refactor like this within the Vue component (no external file):

methods: {
functionBlah () {
      const body = document.getElementsByTagName("BODY")[0],
        universe = document.getElementById("#universe"),
        solarsys = document.getElementById("#solar-system")
       ...
     }
},

mounted() {
this.functionBlah();
}

answered Jun 17, 2019 at 18:17

Len Joseph

1,46812 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Alan Over a year ago

Thanks. but I want to abstract out the function from the vue instance because of its length and complexity. That is why I want to import it.

Collectives™ on Stack Overflow

Loading external JS file within a vue component

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related