Unable to use Moveable in Vue 3: 'Moveable is not a constructor' error

[koko01024122]

Environments

• Framework name: vue3
• Framework version: ^3.2.47
• Moveable Component version:^0.22.2
• Testable Address(optional):

Description

Hello~
I'm using Moveable in vue3,
const moveable=new Moveable(document.body);
I got error

I hope to control the addition, deletion, and other operations in JavaScript. What should I do?
Thank you for your assistance.

[daybrush]

@koko01024122

if you want to use like instance, import Moveable from "moveable";

Use template syntax in vue3-moveable.

[koko01024122]

I'm sorry ,I checked source in packages/vue3-moveable,but I still didn't understand how Use template syntax in .vue3-moveable，I thought movable was prepared for react
I thought movable was prepared for react

<template>
    <div class="container">
        <div class="target" ref="target" @click="test">Vue Moveable</div>
        <Moveable
                className="moveable"
                v-bind:target="['.target']"
                v-bind:draggable="true"
                v-bind:scalable="true"
                v-bind:rotatable="true"
                @drag="onDrag"
                @scale="onScale"
                @rotate="onRotate"
        />
    </div>
</template>
<script>
import Moveable from "moveable"; now
// import Moveable from "vue3-moveable"; befor

export default {
    setup(){
        const onDrag = e => {
            e.target.style.transform = e.transform;
        };
        const onScale = e => {
            e.target.style.transform = e.transform;
        };
        const onRotate = e => {
            e.target.style.transform = e.transform;
        };
        const test=e=>{

            const moveable=new Moveable(document.body);
        }
        return { onDrag, onScale, onRotate,test };
    },
    name: "app",
    components: {
        Moveable,
    },
    methods: {
        onDrag({ transform }) {
            this.$refs.target.style.transform = transform;
        },
        onScale({ drag }) {
            this.$refs.target.style.transform = drag.transform;
        },
        onRotate({ drag }) {
            this.$refs.target.style.transform = drag.transform;
        },
    }
}
</script>

and I got

Which step did I go wrong?

[daybrush]

@koko01024122

See this examples:

https://daybrush.com/moveable/storybook/?path=/story/basic--basic-draggable

[koko01024122]

Thank you,I'll try