I am working on incorporating an external JavaScript library, called "OpenSeadragon", into my Vue Component.
The main challenge I'm facing is figuring out how to properly load this library in my Vue component. In the parent template, I have included the library using:
<script src="{{ asset('js/openseadragon.min.js') }}"></script>
This snippet showcases my Vue TestComponent:
<template>
<div>
<div id="openseadragon" style="width: 100%; height: 600px; border: 1px solid red"></div>
</div>
</template>
<script>
export default {
data(){
return {
}
},
created() {
// The challenge remains on loading openseadragon effectively
OpenSeadragon({
id: "openseadragon",
prefixUrl: "/openseadragon/images/",
tileSources: "/example-images/duomo/duomo.dzi"
});
},
methods: {
//
}
}
</script>
However, this implementation triggers the following error message:
[Vue warn]: Error in created hook: "TypeError: Cannot read property 'appendChild' of null"