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.

• blackening: Console.log solarSystemAnimations after importing it. You should find your mistake there. Vue is telling you it's not a function.
• Alan: Ok I see solarSystemAnimations is an object in console but how can I keep it as a function? What am I not understanding thanks.
• blackening: Export default function() { console.log('hello world') }. Start from there and modify.
• Alan: I see. Thanks for the guidance...

Answer 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();
}

• Alan: 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.