Vue.js is not detected with vue@3.0.0-rc.4

[way2ex]

Be patient.

FYI: @Akryum is working on this. Please wait for the next release. —— From Evan

Version

6.0.0-beta.1

Browser and OS info

版本 84.0.4147.89/ MacOS10.14.3

Steps to reproduce

• install vue@3.0.0-rc.4 and run webpack-dev-server
• download vue-devtools in version of 6.0.0-beta.1

What is expected?

Vue can be detected

What is actually happening?

Vue.js is not detected

---

I don't know it's a question of vue-devtools or vue-next. Could you point what should i do to use vue-devtools . Is something wrong in my project ?

[Uninen]

Vue is also not detected when creating a new Vue 3 project w/ vuex and vue-router using the new vue-cli 4.5.0.

[BellemareMederic]

Confirm that bugs devtools version : 6.0.0 beta 1 "core-js": "^3.6.5", "vue": "^3.0.0-rc.5", "vue-router": "^4.0.0-beta.4"

have a not detected on the chrome extension and my files are not minify

[ThisIsRuddy]

Same except 3.0.0-rc.5 :(

[yoyoys]

I've tested with same result with 3.0.0-rc.5, but __VUE_DEVTOOLS_GLOBAL_HOOK__.store is detected.

...
    "vue": "3.0.0-rc.5",
    "vue-router": "4.0.0-beta.5",
    "vuex": "4.0.0-beta.4"
    "@vue/compiler-sfc": "^3.0.0-rc.5",
    "vue-cli-plugin-vue-next": "~0.1.3"
    "core-js": "^3.6.5",
...

[d-pollard]

Hoping this gets resolved; would love to start playing with the new features

[Rekodr]

same issue with 3.0.0-rc.1, ..., 3.0.0-rc.5 on both Chrome and FireFox. The standalone does not work either. Hope this to be fix soon.

[Yakoot]

same issue

[bzd2000]

indeed, it is really hard to test vue3 without the devtools working.

I try to debug it, but my knowledge of chrome devtools is not good enough

[bzd2000]

I cannot manage to build it locally, something weird in the package.json I don't understand

[haoqunjiang]

I think it's fixed in Vue CLI 4.5.4 with this PR https://github.com/vuejs/vue-cli/pull/5788

If you are using the webpack template, please update the config accordingly.

[marcus-herrmann]

I think it's fixed in Vue CLI 4.5.4 with this PR vuejs/vue-cli#5788

Vue CLI 4.5.4 does not make any difference in my case:

"vue": "^3.0.0-rc.5",
"@vue/cli-service": "~4.5.4",

No dev tools pane in both Firefox (79) and Chrome (83)

[9mm]

I am trying to learn vue and i used vue-cli to make a new vue-3 project, and using the router option with history state enabled. I am using yarn serve for the server. It says vue.js not found in the vue chrome extension. Is this related? Im at a loss how to fix it. Thanks

[Zenemig]

Vue Devtools Version

6.0.0-beta.1

Vue CLI Version

4.5.4

Vue Version

3.0.0-rc.5

Browser and OS info

Google Chrome Version 86.0.4239.0 (Official Build) canary (x86_64) MacOS Catalina 10.15.2

Steps to reproduce

Create a Vue project using vue@3.0.0-rc.5 and run npm run serve Download Vue Devtools version of 6.0.0-beta.1

What is expected?

Vue is detected by the extension

What is actually happening?

Vue is not detected

Just started a new project and when I got to a point where I needed Vue Devtools, turns out it's not working. Is there a fix on the works? I didn't see this referenced on any PRs.

[yyx990803]

FYI: @Akryum is working on this. Please wait for the next release.

[stefaanv]

Same problem here with vue-cli 4.5.4 and typescript.

    "vue": "^3.0.0-0",
    "vue-class-component": "^8.0.0-0",
    "vue-router": "^4.0.0-0",
    "vuex": "^4.0.0-0"

[byungksy]

Same too! "vue": "^3.0.0-0", "vue-class-component": "^8.0.0-0", "vue-router": "^4.0.0-0", "vuex": "^4.0.0-0", "vuex-class": "^0.3.2", "vuex-module-decorators": "^0.17.0"

[euaaaio]

Just build next brunch via yarn && yarn build command then manually add packages/shell-chrome folder to Chrome → Extensions → Developer mode → Load unpacked.

[Uninen]

The manual build works for me but I haven't seen any version yet that would actually work in any meaningful way that would show any components or any other details from my app. The current build only shows an empty app with no components or data. I've tested this with four different Vue 3 projects, the same results with all of them.

[euaaaio]

The manual build works for me but I haven't seen any version yet that would actually work in any meaningful way that would show any components or any other details from my app. The current build only shows an empty app with no components or data. I've tested this with four different Vue 3 projects, the same results with all of them.

Build from next already works.

[Uninen]

Re-tested just now. Interestingly the build from very latest commit doesn't show the Vue tab at all even though the extension loads ok and shows active on the projects. Tested with three different projects.

A build from a couple of commits back loads but for me doesn't show anything but a blank app and doesn't do anything. Haven't seen any functionality in any of my builds from the next branch ever in any of my Vue 3 projects. Using Chrome (85.0.4183.83) on macOS and Vue 3 RC9 w/ vue-router and TypeScript, with vue-cli and one test project with Vite.

All projects show up like this for me (I also have dark mode on but the plugin always loads bright version and haven't found a place for setting it from the new plugin as none of the tabs work properly):

[Uninen]

I also get this error (taken from Chrome extensions error tab) with first page load but it goes away with refresh. It still doesn't seem to affect in te behaviour at all, nothing shows up except a blank App.

[Uninen]

Sorry for the comment spam but I got the plugin somewhat working after completely deleting and reinstalling Chrome. Found out that the problem was in my code which in all projects uses Suspense and async components. After removing these just for debugging purposes I now see a list of components:

So the Suspense-component and async setup is not yet supported (or doesn't work properly) but a build from the next-branch kind-of works already indeed.

[Mehdi-Hp]

Running window.__VUE_DEVTOOLS_GLOBAL_HOOK__.Vue = app.constructor makes Vue tab to appear, but empty.

[Mehdi-Hp]

Found a caveat. Make sure vue-cli-plugin-vue-next is not installed. Fixed my problem.

[ellisonpatterson]

Found a caveat. Make sure vue-cli-plugin-vue-next is not installed. Fixed my problem.

Fixes all issues, thank you!

[yoyoys]

@Mehdi-Hp

Found a caveat. Make sure vue-cli-plugin-vue-next is not installed. Fixed my problem.

This breaks vuex and vue-router.

got message like that

Failed to compile with 7 errors                                        

This dependency was not found:

* vue in ./node_modules/vue-router/dist/vue-router.esm.js, ./node_modules/vuex/dist/vuex.esm-browser.js and 5 others

To install it, you can run: npm install --save vue
No issues found.

[rajinder-yadav]

Not working on Firefox also

[edikdeisling]

This code works for me (Chrome + Vue 3.0.0-rc.10)

// main.ts
import App from '@/App.vue';
import { devtools } from '@/devtools';
import router from '@/router';

createApp(App).use(devtools).use(router).mount('#app');

// devtools.ts
import { App, Plugin } from 'vue';

const devtools: Plugin = {
    install(app: App) {
        // @ts-ignore
        if (process.env.NODE_ENV === 'development' && window.__VUE_DEVTOOLS_GLOBAL_HOOK__) {
            // @ts-ignore
            window.__VUE_DEVTOOLS_GLOBAL_HOOK__.Vue = app;
        }
    },
};

export { devtools };

[ThisIsRuddy]

Not sure what has changed but it seems to be working now as I have just created a fresh project via vue-cli and re-tested

Chrome Extension: Vue DevTools 6.0.0 beta 2

 "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^3.0.0-0",
    "vue-router": "4.0.0-beta.9"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0-0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^7.0.0-0",
    "sass": "^1.26.10",
    "sass-loader": "^10.0.2"
  }

[9mm]

@ThisIsRuddy did you install it from github using the developer version of the extension instead of doing it from the chrome store? Maybe that is the problem

[9mm]

Ah-ha! Here's the beta channel for anyone interested: https://chrome.google.com/webstore/detail/vuejs-devtools/ljjemllljcmogpfapbkkighbhhppjdbg

[9mm]

Now it works, awesome. Thank you @ThisIsRuddy I'm glad you put the version of your extension or I would not have ever noticed.

edit sorry for 3 replies blowing everyone here up

[mkasprz]

I also confirm that on Firefox a version from a beta channel works too. It's available here: https://github.com/vuejs/vue-devtools/releases . Thank You @9mm and others involved.

[lauri108]

Ah-ha! Here's the beta channel for anyone interested: https://chrome.google.com/webstore/detail/vuejs-devtools/ljjemllljcmogpfapbkkighbhhppjdbg

Thank you @9mm and @ThisIsRuddy, now works for me after installing that beta version of Vue devtools. My Vue3 app is being detected.

[mustafadalga]

Ah-ha! Here's the beta channel for anyone interested: https://chrome.google.com/webstore/detail/vuejs-devtools/ljjemllljcmogpfapbkkighbhhppjdbg

I solved the problem with vue.js devtools beta in vue cli 4.5.8 version.Thank you.

[binaryben]

Not sure if related. I installed Vue Dev Tools and when I click the icon it tells me it can't find Vue on the page. I have the following dependencies:

...
"vue": "^3.0.0",
"vue-router": "^4.0.0-0",
"vuex": "^4.0.0-0"
...
"@vue/cli-service": "~4.5.0",

Here is where it gets weird. I installed the beta channel, and now BOTH(!) say they can find vue on the page when I click the icon, but the panel never shows up in devtools. I have also tried disabling the stable channel extension, and the beta extension still says it can detect it but again, no panel. Same behaviour on Brave and Chrome (pretty unsurprising, but thought I would note in case it's of interest).

Thoughts?

[tony140407]

Not sure if related. I installed Vue Dev Tools and when I click the icon it tells me it can't find Vue on the page. I have the following dependencies:

...
"vue": "^3.0.0",
"vue-router": "^4.0.0-0",
"vuex": "^4.0.0-0"
...
"@vue/cli-service": "~4.5.0",

Here is where it gets weird. I installed the beta channel, and now BOTH(!) say they can find vue on the page when I click the icon, but the panel never shows up in devtools. I have also tried disabling the stable channel extension, and the beta extension still says it can detect it but again, no panel. Same behaviour on Brave and Chrome (pretty unsurprising, but thought I would note in case it's of interest).

Thoughts?

right click on vue-devtools icon click "Manage Extensions" check the "Allow access to file URLs"

It works for me I hope this answers your questions.

[bryansray]

For anyone else still having issues ... I had to remove my previous vue.js devtools extension (v5.x) to get the new extension to show up in my Chrome Dev Tools tab. I'm sure you can probably "disable" it as well.

Hope that helps someone out. 🍀

[sgrubsmyon]

Using version 6.0.0.2 of vue-devtools (v6.0.0-beta.2 installed from https://github.com/vuejs/vue-devtools/releases) in Firefox 82.0.3, when I open the Vue panel in Dev Tools (connecting to a Vue 3.0.2 app), I get an exception in the console:

Uncaught (in promise) TypeError: appRecord is undefined
    setupBuiltinLayers moz-extension://bf79a28c-5cbf-4da1-b16d-3bf83aad5179/build/backend.js:2164
    emit eval:1
    _replayBuffer eval:1
    on eval:1
    setupBuiltinLayers moz-extension://bf79a28c-5cbf-4da1-b16d-3bf83aad5179/build/backend.js:2162
    setupTimeline moz-extension://bf79a28c-5cbf-4da1-b16d-3bf83aad5179/build/backend.js:2113
    connect moz-extension://bf79a28c-5cbf-4da1-b16d-3bf83aad5179/build/backend.js:621
    n eval:1
    emit eval:1
    initBackend moz-extension://bf79a28c-5cbf-4da1-b16d-3bf83aad5179/build/backend.js:531
    emit eval:1
    _replayBuffer eval:1
    on eval:1
    initBackend moz-extension://bf79a28c-5cbf-4da1-b16d-3bf83aad5179/build/backend.js:529
    handshake moz-extension://bf79a28c-5cbf-4da1-b16d-3bf83aad5179/build/backend.js:1501
    262 moz-extension://bf79a28c-5cbf-4da1-b16d-3bf83aad5179/build/backend.js:1458
    __webpack_require__ moz-extension://bf79a28c-5cbf-4da1-b16d-3bf83aad5179/build/backend.js:20
    <anonymous> moz-extension://bf79a28c-5cbf-4da1-b16d-3bf83aad5179/build/backend.js:84
    <anonymous> moz-extension://bf79a28c-5cbf-4da1-b16d-3bf83aad5179/build/backend.js:87
backend.js:2164:23

and 2 times:

App with id NaN not found 2 backend.js:561:21
    connect moz-extension://bf79a28c-5cbf-4da1-b16d-3bf83aad5179/build/backend.js:561
    emit moz-extension://bf79a28c-5cbf-4da1-b16d-3bf83aad5179/build/backend.js:3998
    _emit moz-extension://bf79a28c-5cbf-4da1-b16d-3bf83aad5179/build/backend.js:903
    Bridge moz-extension://bf79a28c-5cbf-4da1-b16d-3bf83aad5179/build/backend.js:835
    Bridge moz-extension://bf79a28c-5cbf-4da1-b16d-3bf83aad5179/build/backend.js:835
    listener moz-extension://bf79a28c-5cbf-4da1-b16d-3bf83aad5179/build/backend.js:1477
    (Async: EventListener.handleEvent)
    listen moz-extension://bf79a28c-5cbf-4da1-b16d-3bf83aad5179/build/backend.js:1480
    Bridge moz-extension://bf79a28c-5cbf-4da1-b16d-3bf83aad5179/build/backend.js:833
    handshake moz-extension://bf79a28c-5cbf-4da1-b16d-3bf83aad5179/build/backend.js:1473
    (Async: EventListener.handleEvent)
    262 moz-extension://bf79a28c-5cbf-4da1-b16d-3bf83aad5179/build/backend.js:1458
    __webpack_require__ moz-extension://bf79a28c-5cbf-4da1-b16d-3bf83aad5179/build/backend.js:20
    <anonymous> moz-extension://bf79a28c-5cbf-4da1-b16d-3bf83aad5179/build/backend.js:84
    <anonymous> moz-extension://bf79a28c-5cbf-4da1-b16d-3bf83aad5179/build/backend.js:87

Anyone else seeing this?

[cb-adarsh]

For anyone else still having issues ... I had to remove my previous vue.js devtools extension (v5.x) to get the new extension to show up in my Chrome Dev Tools tab. I'm sure you can probably "disable" it as well.

Hope that helps someone out. 🍀

@bryansray Turns out having both normal and beta devtools causes the issue! I disabled the original vue devtools and beta devtools worked perfectly!! FYI: i had to export devtools manually in my code, see snippet here

[yangtianxia]

Be patient.

FYI: @Akryum is working on this. Please wait for the next release. —— From Evan

Version

6.0.0-beta.1

Browser and OS info

版本 84.0.4147.89/ MacOS10.14.3

Steps to reproduce

• install vue@3.0.0-rc.4 and run webpack-dev-server
• download vue-devtools in version of 6.0.0-beta.1

What is expected?

Vue can be detected

What is actually happening?

Vue.js is not detected

I don't know it's a question of vue-devtools or vue-next. Could you point what should i do to use vue-devtools . Is something wrong in my project ?

可用的方法

import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)

// 分环境处理
if (process.env.NODE_ENV === 'development') {
  if ('__VUE_DEVTOOLS_GLOBAL_HOOK__' in window) {
  // 这里__VUE_DEVTOOLS_GLOBAL_HOOK__.Vue赋值一个createApp实例
    window.__VUE_DEVTOOLS_GLOBAL_HOOK__.Vue = app
  }
}

app.mount('#app')

解决方法来自vue-devtools README.md，之后对比了Vue2 window __VUE_DEVTOOLS_GLOBAL_HOOK__.Vue

后面翻评论看到 @xSorc 已经解决了

[VottusCode]

My current dependencies are the following (Currently, Vue 3.0.3 is installed):

{
  "dependencies": {
    "autoprefixer": "^9",
    "axios": "^0.21.0",
    "bulma": "^0.9.1",
    "core-js": "^3.6.5",
    "epic-spinners": "^1.1.0",
    "postcss": "^7",
    "tailwindcss": "npm:@tailwindcss/postcss7-compat",
    "topbar": "^0.1.4",
    "vue": "^3.0.0",
    "vue-router": "^4.0.0-0",
    "vue3-click-away": "^1.1.0",
    "vuex": "^4.0.0-0"
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^2.33.0",
    "@typescript-eslint/parser": "^2.33.0",
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-typescript": "~4.5.0",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "@vue/eslint-config-prettier": "^6.0.0",
    "@vue/eslint-config-typescript": "^5.0.2",
    "eslint": "^6.7.2",
    "eslint-plugin-prettier": "^3.1.3",
    "eslint-plugin-vue": "^7.0.0-0",
    "lint-staged": "^9.5.0",
    "node-sass": "^4.12.0",
    "prettier": "^1.19.1",
    "sass-loader": "^8.0.2",
    "typescript": "~3.9.3"
  }
}

The project is working fine, without any issues. It has been migrated from Vue 2. With Vue 2, the devtools have worked, but after migrating to Vue 3 they stopped working.

I currently have the Vue.js devtools 6.0.0-beta2 and while they do work with new Vue 3 projects (created via Vue CLI), it does not work with ours. I have even went as far as removing anything except app.mount("#app") and the App.vue component only contained of one div, but to no avail.

Edit: bumped to 3.0.4, still the same issue

[tomhave97]

Ah-ha! Here's the beta channel for anyone interested: https://chrome.google.com/webstore/detail/vuejs-devtools/ljjemllljcmogpfapbkkighbhhppjdbg

Thank you @9mm and @ThisIsRuddy, now works for me after installing that beta version of Vue devtools. My Vue3 app is being detected.

You need to remove it completely. Also if you added it before removing the base one, romove both again and install the beta version. After that it should work. 😄

[VottusCode]

To fix the issue, remove your yarn.lock (or package-lock.json in case of NPM) and install your dependencies again using the appropriate command.

Worked for me, some deps were bumped and I suppose it was fixed in one of them

[FavourOyewumi7]

What works for me is when i installed both the beta and the former version , the only bad thing is the vue panel doesn't actually show

[EthanZeigler]

What works for me is when i installed both the beta and the former version , the only bad thing is the vue panel doesn't actually show

I had the same issue. You have to restart the browser when installing the beta devtools.

[FavourOyewumi7]

oh thanks later got this

[yashrathi-git]

Switching to Vue.js devtools beta channel worked for me. Remove the vue.js devtools extension and install the beta version. Install it from here: https://chrome.google.com/webstore/detail/vuejs-devtools/ljjemllljcmogpfapbkkighbhhppjdbg/related

[jcrawford]

Switching to Vue.js devtools beta channel worked for me. Remove the vue.js devtools extension and install the beta version. Install it from here: https://chrome.google.com/webstore/detail/vuejs-devtools/ljjemllljcmogpfapbkkighbhhppjdbg/related

Thanks that worked for me as well :)

[nicooprat]

I couldn't make devtools work with Vue 3 + Vite 2, for now I got this workaround in main.js (based on previous comment):

const app = createApp(App)
if(import.meta.env.DEV && window.__VUE_DEVTOOLS_GLOBAL_HOOK__) {
  window.__VUE_DEVTOOLS_GLOBAL_HOOK__.Vue = app
}
app.mount('#app')

I might have missed something obvious but devtools were working fine with other Vue 3 +vue-cli, so I guess it's some kind of Vite incompatibility for now.