I've been trying different methods to include external JS files in a Vue Component, such as using mounted() and created(), but unfortunately, none of them have worked for me so far. I'm not sure where I'm going wrong. Any assistance would be greatly appreciated :)
Below is the code snippet:
<template>
<div id="sketchy"></div>
</template>
<script>
export default {
data(){
return {
}
},
mounted() {
if (document.getElementById('sketchy')) return; // was already loaded
var scriptTag = document.createElement("script");
scriptTag.src = "https://bootswatch.com/_vendor/jquery/dist/jquery.min.js";
scriptTag.id = "sketchy";
document.getElementsByTagName('head')[0].appendChild(scriptTag);
},
mounted() {
if (document.getElementById('sketchy')) return; // was already loaded
var scriptTag = document.createElement("script");
scriptTag.src = "https://bootswatch.com/_vendor/popper.js/dist/umd/popper.min.js";
scriptTag.id = "sketchy";
document.getElementsByTagName('head')[0].appendChild(scriptTag);
},
mounted() {
if (document.getElementById('sketchy')) return; // was already loaded
var scriptTag = document.createElement("script");
scriptTag.src = "https://bootswatch.com/_vendor/bootstrap/dist/js/bootstrap.min.js";
scriptTag.id = "sketchy";
document.getElementsByTagName('head')[0].appendChild(scriptTag);
},
}
</script>
<style scoped>
</style>