Vue.js Chrome developer tools not recognising Vue

[akauppi]

This may be because of the way we build the app.

[akauppi]

Seen references, what worked for people:

The work-around was assigning window.Vue so the devtool could find it.

Q: What should I assign that to? When Vue.js 3 is imported from npm (not loaded from CDN), there is no such great object.

Vue.config.devtools = true;

Based on new Global API, it's app.config. Didn't work.

---

Chrome 90.0.4430.85 on macOS Vue extension 6.0.0 beta 8

[akauppi]

If the page uses a production/minified build of Vue.js, devtools inspection is disabled by default so the Vue pane won't show up.

Vue 3.0.11 offers these:

node_modules/vue/dist/
├── vue.cjs.js
├── vue.cjs.prod.js
├── vue.d.ts
├── vue.esm-browser.js
├── vue.esm-browser.prod.js
├── vue.esm-bundler.js
├── vue.global.js
├── vue.global.prod.js
├── vue.runtime.esm-browser.js
├── vue.runtime.esm-browser.prod.js
├── vue.runtime.esm-bundler.js
├── vue.runtime.global.js
└── vue.runtime.global.prod.js

Changed the code so that vue.esm-browser.js gets loaded.

Not enough. Restarted npm run dev but the Developer Tools icon still says "Vue.js detected".

What next???

[akauppi]

Found enough clues here (see under "For Vue 3 App"):

windiw.postMessage({
    devtoolsEnabled: true,
    vueDetected: true
  }, '*')

[akauppi]

It doesn't seem to matter whether the Vue / Vue Router libraries are production or development (unobfuscated) builds.