vue-image-zoomer icon indicating copy to clipboard operation
vue-image-zoomer copied to clipboard

I am unable to use the umd version

Open vkWeb opened this issue 8 months ago • 0 comments

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!

vkWeb avatar Jun 13 '24 07:06 vkWeb