vue-image-zoomer
vue-image-zoomer copied to clipboard
I am unable to use the umd version
First of all, thank you so much @samjonesigd for creating and maintaining this. :heart:
I don't use a build step in our web app. So I am trying to use the UMD version.
I have the following in my HTML's head:
<!-- Vue 3 JS -->
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<!-- Vuetify 3 JS -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.js"></script>
<!-- Vuetify 3 CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet">
<!-- Material Design Icons -->
<link href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
<!-- Vue Image Zoomer -->
<script src="https://www.unpkg.com/[email protected]/dist/vue-image-zoomer.umd.js"></script>
<link href="https://www.unpkg.com/[email protected]/dist/style.css" rel="stylesheet">
Then, in a script before </body>
, I have:
const VueImageZoomer = window["vue-image-zoomer"];
In my Vue's createApp
I have put the below:
components: {
"vue-image-zoomer": VueImageZoomer
},
I am using it as below in my HTML:
<vue-image-zoomer :regular="'data:image/png;base64,' + testCase.test_steps[stepIndexRangerPDFDialog].baselinePNGBase64">
</vue-image-zoomer>
It's showing an error on the developer console:
Uncaught TypeError: Cannot read properties of undefined (reading 'createElementVNode')
at vue-image-zoomer.umd.js:1:6287
at vue-image-zoomer.umd.js:1:214
at vue-image-zoomer.umd.js:1:250
Please tell me what I am doing wrong? How I can successfully use vue-image-zoomer without a build step?
Thanks @samjonesigd!