0

I have the concept of a homepage (Home.vue) that is based off a template I purchased *includes (css, html file, and custom javascript). Almost all the css has been imported correctly but I can't seem to get the javascript loaded like the template. I believe Vue bundles everything into the app.js maybe?

Here is the Source of structure of the template and the my project.

Template enter image description here

My file enter image description here

RyGuy
  • 23
  • 4
  • Are you using webpack? Typically you need to `import` or `require` the main JS file for that library. – Decade Moon Mar 06 '20 at 05:17
  • Does this answer your question? [How to include local script files in Vue](https://stackoverflow.com/questions/55530604/how-to-include-local-script-files-in-vue) - as mentioned in the answer, your scripts should be modules. otherwise import them in your index.html using the script tag. – rx2347 Mar 06 '20 at 05:22
  • You can import the JavaScript files like `import './path-to-js.js'`; this is called a side effecting import and the result will be that the these files are loaded with your app and bundled with it for production – Aluan Haddad Mar 06 '20 at 08:09
  • @rx2347 you are correct sir! One comment though below. – RyGuy Mar 09 '20 at 04:56

1 Answers1

0

@rx2347 That works! (But)

What's weird is that the local javascript is jquery / legacy js, so they don't export anything. I don't think the javascript has time to find the elements on the DOM referenced in the legacy code (ex. document.getElementById('asd'))

So that's on me to figure out

Thanks for the help!

RyGuy
  • 23
  • 4
  • You'll probably want to look into the vue lifecycle hooks like mounted() and created() for that before running any dom related functions from those scripts: https://vuejs.org/v2/guide/instance.html#Lifecycle-Diagram – rx2347 Mar 09 '20 at 20:17
  • @rx2347 yeah good idea for sure. I think I got it working actually just including them in main js with the `import * as myBlabla "blabla.js"` – RyGuy Mar 10 '20 at 21:18