I am unable to use the umd version

[vkWeb]

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/vuetify@3.4.7/dist/vuetify.min.js"></script>

    <!-- Vuetify 3 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/vuetify@3.4.7/dist/vuetify.min.css" rel="stylesheet">

    <!-- Material Design Icons -->
    <link href="https://cdn.jsdelivr.net/npm/@mdi/font@5.x/css/materialdesignicons.min.css" rel="stylesheet">

    <!-- Vue Image Zoomer -->
    <script src="https://www.unpkg.com/vue-image-zoomer@2.4.0/dist/vue-image-zoomer.umd.js"></script>
    <link href="https://www.unpkg.com/vue-image-zoomer@2.4.0/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!

[samjonesigd]

@vkWeb

fixed in 2.4.1

use this const { VueImageZoomer } = window['VueImageZoomer'];

[vkWeb]

Thanks buddy @samjonesigd, appreciate your work!