Embed in vite vue 3 app? Possible?

Using JavaScript with Hype
1

Has anybody got this into a vue 3 ts / vite app and was able to control it?

<script setup lang="ts" >


const vMyDirective: any = {
    beforeMount: (el: any) => {
        let foo = document.createElement('script');
        foo.setAttribute("type", "text/javascript");
        foo.setAttribute("charset", "utf-8");
        foo.setAttribute("src", "/src/assets/countUp.hyperesources/countup_hype_generated_script.js?64669");
        foo.setAttribute("data-transaction-amount", "14.90")
        el.append(foo)
        console.log('el', el)
    }
}

</script>
<template>
    <div
        v-my-directive
        id="countup_hype_container"
        class="HYPE_document"
        style="margin:auto;position:relative;width:600px;height:400px;overflow:hidden;"
    ></div>
</template>
2

You can always render an Hype Document inside an iFrame and send in JS commands either by post Message or if the iFrame source URL doesn’t fall under CORS use window.frames.

1 Like
3

I get this error if I use iframe, object, or other means. I was able to get keyshape to work by using a object. Sadly keyshape doesn't have call backs for click events, it's a bit more limiting.

HYPE-740.thin.min.js:1 Uncaught SyntaxError: Cannot use import statement outside a module

I tried some of the things off this webpage but after the first few they were over my head.