For my vue3 component, I need to load certain scripts. Here is what I am currently implementing:
<script setup>
import { onMounted } from 'vue'
function createElement (el, url, type) {
const script = document.createElement(el)
if (type) script.type = type
script.src = url
return script
}
onMounted(() => {
const customScript = createElement('script', 'https://example.com/script.js', 'text/javascript')
customScript.onload = () => {
// Execute code once script is loaded
console.log('Script loaded successfully!')
}
customScript.onerror = () => console.log('Error loading script')
})
</script>
The function createElement is used to dynamically generate any required element. However, I am facing an issue where the onload block is not triggering as expected after loading the script instance.