Vue 3 - Vue devtools support

[MatthijsBe]

Hi,

In our project we're importing Vue 3 with use of systemjs-importmap, and in our vue single-spa apps we use vue as external. But the vue devtools won't work and will give the message Vue.js not detected.

Versions/Imports: "vue": "https://cdn.jsdelivr.net/npm/vue@3.0.5/dist/vue.runtime.global.prod.js", "single-spa": "https://cdn.jsdelivr.net/npm/single-spa@5.9.0/lib/system/single-spa.min.js Devtools: 6.0.0 beta 7

What do we need to do, to make the Vue Devtools work?

side note we're also using TS.

[joeldenning]

Hi @MatthijsBe, loading Vue 3 with SystemJS is a bit tricky because vue 3 no longer publishes a UMD version to npm - only a global variable version and ESM version.

The first thing is to check whether Vue 3 is being loaded properly by SystemJS. See https://github.com/single-spa/single-spa/issues/731, https://github.com/single-spa/single-spa/issues/672, and https://github.com/systemjs/systemjs/issues/2272#issuecomment-744636282.

Once you've confirmed that Vue 3 is being loaded properly, check if the vue 3 devtools are working and let us know.

[MatthijsBe]

@joeldenning thanks for your reply, I've added System.set(System.resolve('vue'), window.Vue) and changed the Vue version to: https://cdn.jsdelivr.net/npm/vue@3.0.5/dist/vue.global.prod.js

Vue is now detected by the devtools 🎉, but (haha always the "but" 🙈 ) our components that use vue externaly will give the following error: Cannot read property 'defineComponent' of undefined at export default defineComponent({})

so it seems that some components are loaded before vue is loaded properly, is there any way to fix this?

And also the index.ejs will throw: system.js:699 Uncaught Error: Unable to resolve bare specifier 'vue'

Update

---

Since we're loading the import map from an external json, I tried some things, with a semi nice result 😄 .

What I did was remove vue from the external import map and placed it inside a script tag(like the example root-config), now the bare specifier 'vue' error is gone.

But by doing this, I have 3 places where we need to maintain the vue version inside the index.ejs (we're using isDev, isTst and prod_ ).

<% if (isDev) { %>
 <script type="systemjs-importmap">    
      {
        "imports": {
          "vue": "https://cdn.jsdelivr.net/npm/vue@3.0.5/dist/vue.global.min.js"
        }
      }
  </script> 
  <script type="systemjs-importmap" src="https://localhost:3000/importmap/importmap.json"></script>
<% } else { %>
    ...

So I thought maybe I need to create a separate importmap.json with only vue inside it, but this leads into the bare specifier 'vue' error.

[joeldenning]

Glad to hear you've made some progress. Here's a link that shows the way I recommend loading vue 3: https://github.com/musashiM82/root-config/blob/main/src/index.ejs

[MatthijsBe]

@joeldenning Thanks, I got it working :) closing this issue!