Search code examples
javascriptvue.js

How to import from vueuse in Vue SFC Playground?


When I try to add vueuse via Import Map like @vueuse/core": "https://www.unpkg.com/@vueuse/core?module - for some reason I didn't get working reactivity in vueuse.

Import seemd to be working like expected and I didn'get any errors, but without reactivity.

play.vuejs.org


Solution

  • module parameter requires to either all Vue-related entries in import map to be loaded from unpkg:

    Expands all “bare” import specifiers in JavaScript modules to unpkg URLs. This feature is very experimental

    This isn't done in this playground and results in duplicate vue copy loaded by @vueuse/core? from unpkg:

      "imports": {
        "vue": "https://play.vuejs.org/vue.runtime.esm-browser.js",
        "vue/server-renderer": "https://play.vuejs.org/server-renderer.esm-browser.js",
        "@vueuse/core": "https://www.unpkg.com/@vueuse/core?module"
      },
    

    Multiple Vue copies are a known cause of the loss of reactivity.

    This needs to be fixed by either changing vue, etc to use unpkg. Or ?module shouldn't be used, and the correct tree of dependencies should be added to import map (a demo):

      "imports": {
        "vue": "https://play.vuejs.org/vue.runtime.esm-browser.js",
        "vue/server-renderer": "https://play.vuejs.org/server-renderer.esm-browser.js",
        "@vueuse/core": "https://www.unpkg.com/@vueuse/[email protected]/index.mjs",
        "@vueuse/shared": "https://www.unpkg.com/@vueuse/[email protected]/index.mjs",
        "vue-demi": "https://www.unpkg.com/[email protected]/lib/index.mjs"
      },