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

way2ex · 2020-07-25T07:00:47Z

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 · 2020-07-26T09:43:17Z

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 · 2020-08-01T01:30:12Z

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 · 2020-08-03T11:08:20Z

Same except 3.0.0-rc.5 :(

yoyoys · 2020-08-05T04:31:41Z

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 · 2020-08-06T13:40:30Z

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

Rekodr · 2020-08-08T20:22:09Z

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 · 2020-08-17T12:14:55Z

same issue

bzd2000 · 2020-08-17T12:19:46Z

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 · 2020-08-17T16:12:35Z

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

sodatea · 2020-08-18T14:34:25Z

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

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

marcus-herrmann · 2020-08-18T15:03:25Z

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 · 2020-08-20T02:12:15Z

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 · 2020-08-20T17:01:23Z

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 · 2020-08-24T02:18:41Z

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

stefaanv · 2020-08-28T06:40:18Z

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"

euaaaio · 2020-09-01T10:29:11Z

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

Uninen · 2020-09-01T10:55:02Z

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 · 2020-09-01T11:02:17Z

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 · 2020-09-01T11:43:13Z

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 · 2020-09-01T11:47:06Z

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 · 2020-09-01T12:19:26Z

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 · 2020-09-02T16:12:40Z

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

Mehdi-Hp · 2020-09-06T13:59:39Z

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

ellisonpatterson · 2020-09-08T16:01:26Z

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

Fixes all issues, thank you!

yoyoys · 2020-09-08T16:33:33Z

@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 · 2020-09-10T20:38:55Z

Not working on Firefox also

edikdeisling · 2020-09-11T07:01:56Z

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 };

And also fixes the runtime alias, as mentioned at vuejs/devtools#1244 (comment)

ThisIsRuddy · 2020-09-12T20:41:40Z

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 · 2020-09-12T22:22:38Z

@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

yangtianxia · 2020-12-03T13:14:19Z

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 · 2020-12-18T08:47:08Z

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 · 2020-12-18T14:02:27Z

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 · 2020-12-28T17:00:49Z

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 · 2021-01-05T01:29:49Z

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 · 2021-01-17T04:36:47Z

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 · 2021-01-18T02:36:46Z

oh thanks later got this

yashrathi-git · 2021-02-25T13:13:49Z

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 · 2021-03-12T01:58:25Z

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 · 2021-03-21T10:00:22Z

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.

LinusBorg · 2021-03-21T11:10:19Z

Devtools work fine for my Vite projects without any workarounds:

nicholasscottfish · 2021-03-29T00:04:46Z

For anyone still having this issue on Vue 3 projects:

Install the beta version of Vue dev tools - https://v3.vuejs.org/guide/migration/introduction.html#devtools-extension
Disable the stable version of the extension via chrome://extensions/
For localhost urls you may need to edit the extension options and ensure "Allow access to file URLs" is enabled

When switching back to Vue 2 projects:

Disable the beta version via chrome://extensions/
Enable the stable version of the extension

Note: You may need to restart Chrome for the changes to take effect

germsb · 2021-04-04T09:35:30Z

Devtools work fine for my Vite projects without any workarounds:

The vue tab appears fine but it's the only thing that works. Click on image to see video.

lloydjatkinson · 2021-04-13T02:04:31Z

This also does not work for me. I have both versions of the Vue dev tools installed but no tab in F12.

germsb · 2021-04-13T06:42:35Z

Devtools work fine for my Vite projects without any workarounds:

The vue tab appears fine but it's the only thing that works. Click on image to see video.

Finally, I solved the problem by uninstalling chrome and deleting all the folders and files it leaves behind. After reinstallation, the problem came back when I logged in to synchronize data from my Google account. I had to turn off extension sync and some more stuff before everything was back to normal

k0d3d · 2021-08-23T15:05:05Z

If using Vue 3, you need the new version of the extension that is currently still in beta https://chrome.google.com/webstore/detail/vuejs-devtools/ljjemllljcmogpfapbkkighbhhppjdbg?hl=en

nolimitdev · 2021-11-24T09:22:17Z

New extension https://chrome.google.com/webstore/detail/vuejs-devtools/ljjemllljcmogpfapbkkighbhhppjdbg?hl=en seems to support also Vue 2 although website https://v3.vuejs.org/guide/migration/introduction.html#devtools-extension says that only Vue 3 is supported. The same with Router support (Vuex support not tested).

The new version is currently in beta and only supports Vue 3 (for now). Vuex and Router integration is also work in progress.

WhyNotHugo · 2022-01-20T21:00:31Z

The latest version of the addon still won't pick up Vue3 project. The latest version is from January 2021, so it seems it's still not been pushed to AMO?

Akryum · 2022-01-20T23:52:54Z

Unfortunately Mozilla doesn't allow uploading beta versions of addons on AMO.

WhyNotHugo · 2022-01-21T10:00:44Z

Oh, vue3 support is not yet stable?

LinusBorg · 2022-01-21T10:18:09Z

It basically is, we just haven't done the switch yet, which we will be doing alongside the rest shortly:

https://blog.vuejs.org/posts/vue-3-as-the-new-default.html

WhyNotHugo · 2022-01-21T10:36:55Z

Ah, thanks! I'd missed that there was a coordinated switch date. Looking forward to it.

hussein12334 · 2022-02-07T20:18:38Z

vue.js devtools just stopped working, no clue why just doesnt want to detect anything

tomexsansdev · 2022-04-28T07:53:33Z

I Know this is Closed. In Case someone needs this to save you a lot of hair pulling.
When Using VueJS3 + Vite

Using the Version 6.1.4 of the FireFox DevTools Extension

Package.json

...
 "vue": "^3.2.31",
 "vue-chartjs": "^4.0.6",
 "vue-router": "^4.0.12",
  "@vitejs/plugin-vue": "^2.2.2",
  "@vitejs/plugin-vue-jsx": "^1.3.7",
  "@vue/eslint-config-prettier": "^7.0.0",
  "@vue/test-utils": "^2.0.0-rc.18"
...

You need to add it to the it to the Vite config

Vite.config.js

export default defineConfig({
  __VUE_PROD_DEVTOOLS__ : process.env.NODE_ENV === 'development'
})

sodatea added a commit to vuejs/vue-cli-plugin-vue-next that referenced this issue Sep 11, 2020

fix: don't modify the webpack config if the project's on Vue CLI >= 4.5

bbe310c

And also fixes the runtime alias, as mentioned at vuejs/devtools#1244 (comment)

HoboDev mentioned this issue Dec 4, 2020

Enable devtools in production #1321

Open

underfin mentioned this issue Dec 5, 2020

It's not work with the devtools vitejs/vite#1161

Closed

Akryum closed this as completed Jan 29, 2021

This was referenced Sep 15, 2021

[Snyk] Security upgrade webpack-cli from 3.3.12 to 4.0.0 XirdigH/vue-devtools#29

Open

[Snyk] Fix for 1 vulnerabilities XirdigH/vue-devtools#30

Open

[Snyk] Security upgrade webpack-cli from 3.3.12 to 4.0.0 XirdigH/vue-devtools#32

Open

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

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

Comments

way2ex commented Jul 25, 2020 • edited

Version

Browser and OS info

Steps to reproduce

What is expected?

What is actually happening?

Uninen commented Jul 26, 2020 • edited

BellemareMederic commented Aug 1, 2020

ThisIsRuddy commented Aug 3, 2020

yoyoys commented Aug 5, 2020

d-pollard commented Aug 6, 2020

Rekodr commented Aug 8, 2020

Yakoot commented Aug 17, 2020

bzd2000 commented Aug 17, 2020 • edited

bzd2000 commented Aug 17, 2020 • edited

sodatea commented Aug 18, 2020

marcus-herrmann commented Aug 18, 2020

9mm commented Aug 20, 2020 • edited

Zenemig commented Aug 20, 2020 • edited

Vue Devtools Version

Vue CLI Version

Vue Version

Browser and OS info

Steps to reproduce

What is expected?

What is actually happening?

yyx990803 commented Aug 24, 2020

stefaanv commented Aug 28, 2020

euaaaio commented Sep 1, 2020

Uninen commented Sep 1, 2020

euaaaio commented Sep 1, 2020 • edited

Uninen commented Sep 1, 2020 • edited

Uninen commented Sep 1, 2020

Uninen commented Sep 1, 2020 • edited

Mehdi-Hp commented Sep 2, 2020

Mehdi-Hp commented Sep 6, 2020

ellisonpatterson commented Sep 8, 2020

yoyoys commented Sep 8, 2020 • edited

rajinder-yadav commented Sep 10, 2020

edikdeisling commented Sep 11, 2020

ThisIsRuddy commented Sep 12, 2020

9mm commented Sep 12, 2020

yangtianxia commented Dec 3, 2020

Version

Browser and OS info

Steps to reproduce

What is expected?

What is actually happening?

可用的方法

VottusCode commented Dec 18, 2020 • edited

tomhave97 commented Dec 18, 2020

VottusCode commented Dec 28, 2020 • edited

FavourOyewumi7 commented Jan 5, 2021 • edited

EthanZeigler commented Jan 17, 2021

FavourOyewumi7 commented Jan 18, 2021

yashrathi-git commented Feb 25, 2021

jcrawford commented Mar 12, 2021

nicooprat commented Mar 21, 2021

LinusBorg commented Mar 21, 2021

nicholasscottfish commented Mar 29, 2021

germsb commented Apr 4, 2021

lloydjatkinson commented Apr 13, 2021

germsb commented Apr 13, 2021

k0d3d commented Aug 23, 2021

nolimitdev commented Nov 24, 2021

WhyNotHugo commented Jan 20, 2022

Akryum commented Jan 20, 2022

WhyNotHugo commented Jan 21, 2022

LinusBorg commented Jan 21, 2022

WhyNotHugo commented Jan 21, 2022

hussein12334 commented Feb 7, 2022

tomexsansdev commented Apr 28, 2022

way2ex commented Jul 25, 2020 •

edited

Uninen commented Jul 26, 2020 •

edited

bzd2000 commented Aug 17, 2020 •

edited

bzd2000 commented Aug 17, 2020 •

edited

9mm commented Aug 20, 2020 •

edited

Zenemig commented Aug 20, 2020 •

edited

euaaaio commented Sep 1, 2020 •

edited

Uninen commented Sep 1, 2020 •

edited

Uninen commented Sep 1, 2020 •

edited

yoyoys commented Sep 8, 2020 •

edited

VottusCode commented Dec 18, 2020 •

edited

VottusCode commented Dec 28, 2020 •

edited

FavourOyewumi7 commented Jan 5, 2021 •

edited