[Vuejs]-Why the result of VueUse.useMouse() without reactive?

by

0👍

✅

Oh, I see, is the +esm, we can’t use jsdelivr provide the +esm file, because it will no read @vueuse/shared module.
Change the code like below, that will be fine. 😑😑😑

<script async="async" src="https://cdn.jsdelivr.net/npm/es-module-shims@1.8.0/dist/es-module-shims.min.js"></script>
<script type="importmap">
{ "imports" : {
    "vue-demi"       : "https://cdn.jsdelivr.net/npm/vue-demi@0.14.5/lib/v3/index.min.mjs",
    "vue"            : "https://cdn.jsdelivr.net/npm/vue@3.3.4/dist/vue.esm-browser.prod.js",
    "@vueuse/core"   : "https://cdn.jsdelivr.net/npm/@vueuse/core@10.2.1/index.min.mjs", 
    "@vueuse/shared" : "https://cdn.jsdelivr.net/npm/@vueuse/shared@10.2.1/index.min.mjs"
} }
</script>

<div id="app01">
    <span>mouse : {{x}} | {{y}}</span>
</div>

<script type="module">
import * as Vue from 'vue';
import * as VueUseCore from '@vueuse/core';

let vc01 = Vue.createApp({
    setup : function(props, {attrs, emit, slots, expose, }){
        let { x, y, } = VueUseCore.useMouse();
        return { x, y, };
    },
});

let vi01 = vc01.mount('#app01');
</script>

Leave a comment