I am currently developing a spa application using Vue.js and I have come across three options for loading my javascript libraries such as bootstrap.js or jquery.js:
1. First option is to include all javascript libraries needed for my application in the index.html where my Vue.js application resides. However, I noticed that some javascript libraries do not work well in this approach.
For example: There is a javascript library that calculates page height by selecting a div with the specific id of "page-container", but if that div is not loaded when the page is rendered from the server, an error will be thrown since the id "page-container" does not exist yet.
2. Second option is to add them like this to all my javascript library js files:
// before you use your files in some components,you should package them
// your local files
export default { //export your file
your_function(){ // defined your function
...
}
}
// now your can use it
// your component file
<script>
import local_file from 'your_file_relative_path'
//now you can use it in the hook function
created(){ //or other hook function
local_file.your_function() //call your function
}
</script>
However, this means I would need to make changes to every javascript library I use...
3. Third option is to add them using npm, and simply import them in the Vue component. This method works fine and feels more natural, but not all of my javascript libraries are available on npm. Some of them are admin template related that I purchased from Themeforest and will never be on npm.
So which approach is the better way or perhaps there is an even better way than these 3 options I have explored? It's difficult to find tutorials or discussions that cover adding other javascript libraries to a spa Vue.js project, as most of them just insert Bootstrap into the index.html and call it a day.