-
-
Notifications
You must be signed in to change notification settings - Fork 4.1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Vue.js is not detected with vue@3.0.0-rc.4 #1244
Comments
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. |
Confirm that bugs have a not detected on the chrome extension and my files are not minify |
Same except 3.0.0-rc.5 :( |
I've tested with same result with 3.0.0-rc.5, but ...
"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",
... |
Hoping this gets resolved; would love to start playing with the new features |
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. |
same issue |
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 |
I cannot manage to build it locally, something weird in the package.json I don't understand |
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. |
Vue CLI 4.5.4 does not make any difference in my case:
No dev tools pane in both Firefox (79) and Chrome (83) |
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 |
Vue Devtools Version6.0.0-beta.1 Vue CLI Version4.5.4 Vue Version3.0.0-rc.5 Browser and OS infoGoogle Chrome Version 86.0.4239.0 (Official Build) canary (x86_64) Steps to reproduceCreate a Vue project using vue@3.0.0-rc.5 and run 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. |
FYI: @Akryum is working on this. Please wait for the next release. |
Same problem here with
|
Same too! |
Just build |
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. |
|
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): |
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 |
Found a caveat. Make sure |
Fixes all issues, thank you! |
This breaks vuex and vue-router. got message like that
|
Not working on Firefox also |
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-v6#1244 (comment)
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
|
可用的方法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 后面翻评论看到 @xSorc 已经解决了 |
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 |
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. 😄 |
To fix the issue, remove your Worked for me, some deps were bumped and I suppose it was fixed in one of them |
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. |
oh thanks later got this |
Switching to Vue.js devtools beta channel worked for me. |
Thanks that worked for me as well :) |
I couldn't make devtools work with Vue 3 + Vite 2, for now I got this workaround in 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. |
For anyone still having this issue on Vue 3 projects:
When switching back to Vue 2 projects:
Note: You may need to restart Chrome for the changes to take effect |
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 |
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 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? |
Unfortunately Mozilla doesn't allow uploading beta versions of addons on AMO. |
Oh, vue3 support is not yet stable? |
It basically is, we just haven't done the switch yet, which we will be doing alongside the rest shortly: |
Ah, thanks! I'd missed that there was a coordinated switch date. Looking forward to it. |
vue.js devtools just stopped working, no clue why just doesnt want to detect anything |
I Know this is Closed. In Case someone needs this to save you a lot of hair pulling. Using the Version 6.1.4 of the FireFox DevTools Extension Package.json
You need to add it to the it to the Vite config Vite.config.js
|
Be patient.
Version
6.0.0-beta.1
Browser and OS info
版本 84.0.4147.89/ MacOS10.14.3
Steps to reproduce
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 ?
The text was updated successfully, but these errors were encountered: