vuejs
Vue.js devtools no longer showing the Vue tab in my console.
Since today the devtools in my console is no longer showing up. however the extension says: "Vue.js is detected on this page." Im not sure if this is related to the release done today, but I have checked with my 3 colleagues, and they were all investigating the same issue without knowing we all had the issue. And the branches where it worked yesterday don't work today, so its not our code I assume...
Same here. In one project it's showing up, in another one it's not. Both running Vue 3 and Vite.
Same here. In one project it's showing up, in another one it's not. Both running Vue 3 and Vite.
I have asked, it is not working on our new Vue3 + Vite project nor our Vue3 + Webpack old project.
I'm afraid i do not have the time to create project, and our current projects are private, but I'm willing to help you figure it out of you give me specifics to try. Or supply a chrome extension zip from an earlier version, to pinpoint which version worked.
I'm afraid i do not have the time to create project, and our current projects are private, but I'm willing to help you figure it out of you give me specifics to try. Or supply a chrome extension zip from an earlier version, to pinpoint which version worked.
I'll follow up on this issue (but unfortunately I can't reproduce it now), and if anyone who has this issue wants devtools to work right away, I think we can use v6 version, we officially released the v7 version today.
Not limited to provide a mini repo, any additional project information would be appreciated 🙏. For example, vue.js version. Whether the project is embedded in the iframe (see: #498 ), whether multiple vue devtools version extensions are installed at the same time, etc.
BTW, The v7 version of devtools only supports Vue3. If your application is still using Vue2, please install the v6 version. If you're still using v5 version, you can install it here. See https://devtools.vuejs.org/guide/migration
We are using Vue3 for both our projects and i can confirm that v6 is indeed working. At least now i can keep working towards my deadline. I hope someone can supply you a repo to verify and test.
How many ppl are using Vue3 but can't display devtools panel? Leave a comment at 👀 . Leave a comment at 😕 if the devtools panel doesn't displayed on vue2 (as expected, v7 only supports vue3).
I found many Vue3 projects on GitHub to try to reproduce the issue that the Vue tab didn't display, but unfortunately, I couldn't reproduce it. So, if anyone is facing this issue in a vue3 project, providing a mini repo would be appreciated 🙏
Also note because the extension is technically a different one now, the Vue tab may have changed its position in the devtools tabs and therefore hidden under the expand button (especially if you previously manually moved it to the front):
Also note because the extension is technically a different one now, the Vue tab may have changed its position in the devtools tabs and therefore hidden under the expand button (especially if you previously manually moved it to the front)
No, this is not the case. The Vue tab is just not displaying at all in Chrome. It still works in Firefox, where the version of the extension is 6.6.3
Also note because the extension is technically a different one now, the Vue tab may have changed its position in the devtools tabs and therefore hidden under the expand button (especially if you previously manually moved it to the front)
No, this is not the case. The
Vuetab is just not displaying at all in Chrome. It still works in Firefox, where the version of the extension is6.6.3
Can you provide more information? Vue version, snapshot, or something specific about the project.
I can't give you repo access, but I can paste our package.json and vite.config.js if that helps:
package.json
{
"name": "foobar",
"version": "1.1.0",
"private": true,
"type": "module",
"scripts": {
"preinstall": "npx only-allow pnpm",
"dev": "vite --host",
"build": "vite build",
"lint": "eslint --ext .vue --ignore-path .gitignore --fix resources",
"format": "prettier . --write"
},
"engines": {
"node": "^20.13.1"
},
"dependencies": {
"@casl/ability": "^6.7.1",
"@casl/vue": "^2.2.2",
"@ckeditor/ckeditor5-basic-styles": "^41.4.2",
"@ckeditor/ckeditor5-build-decoupled-document": "^41.4.2",
"@ckeditor/ckeditor5-essentials": "^41.4.2",
"@ckeditor/ckeditor5-font": "^41.4.2",
"@ckeditor/ckeditor5-link": "^41.4.2",
"@ckeditor/ckeditor5-paragraph": "^41.4.2",
"@ckeditor/ckeditor5-table": "^41.4.2",
"@ckeditor/ckeditor5-theme-lark": "^41.4.2",
"@ckeditor/ckeditor5-vue": "^5.1.0",
"@ckeditor/vite-plugin-ckeditor5": "^0.1.3",
"@fortawesome/fontawesome-free": "^6.5.2",
"@he-tree/vue3": "^1.2.9",
"@highlightjs/vue-plugin": "^2.1.2",
"@mdi/font": "^7.4.47",
"@pdftron/webviewer": "^10.9.0",
"@popperjs/core": "^2.11.8",
"@sentry/vite-plugin": "^2.16.1",
"@sentry/vue": "^8.9.1",
"@syncfusion/ej2-base": "^26.1.35",
"@syncfusion/ej2-data": "^26.1.35",
"@syncfusion/ej2-icons": "^26.1.35",
"@syncfusion/ej2-navigations": "^26.1.35",
"@syncfusion/ej2-vue-base": "^26.1.35",
"@syncfusion/ej2-vue-buttons": "^26.1.35",
"@syncfusion/ej2-vue-calendars": "^26.1.35",
"@syncfusion/ej2-vue-dropdowns": "^26.1.35",
"@syncfusion/ej2-vue-grids": "^26.1.35",
"@syncfusion/ej2-vue-inputs": "^26.1.35",
"@syncfusion/ej2-vue-layouts": "^26.1.35",
"@syncfusion/ej2-vue-lists": "^26.1.35",
"@syncfusion/ej2-vue-navigations": "^26.1.35",
"@syncfusion/ej2-vue-pivotview": "^26.1.35",
"@syncfusion/ej2-vue-popups": "^26.1.35",
"@syncfusion/ej2-vue-richtexteditor": "^26.1.35",
"@syncfusion/ej2-vue-schedule": "^26.1.35",
"@syncfusion/ej2-vue-splitbuttons": "^26.1.35",
"@vitejs/plugin-vue": "^5.0.5",
"@vitejs/plugin-vue-jsx": "^4.0.0",
"@vojtechlanka/vue-tags-input": "^3.1.1",
"@vueform/toggle": "^2.1.4",
"@vuelidate/core": "^2.0.3",
"@vuelidate/validators": "^2.0.3",
"@zanmato/vue3-treeselect": "^0.2.0",
"autoprefixer": "^10.4.4",
"axios": "^1.7.2",
"axios-mock-adapter": "^1.20.0",
"bootstrap": "^5.3.3",
"bootstrap-vue-next": "^0.19.0",
"ckeditor5": "^43.0.0",
"clipboard": "^2.0.8",
"core-js": "^3.37.0",
"cross-env": "^7.0.3",
"deepmerge": "^4.2.2",
"dropzone": "^5.9.3",
"helper-js": "^3.1.5",
"highlight.js": "^11.9.0",
"javascript-time-ago": "^2.3.10",
"jszip": "^3.10.1",
"laravel-echo": "^1.16.1",
"laravel-vite-plugin": "^1.0.4",
"less": "^4.1.2",
"line-awesome": "^1.3.0",
"lodash": "^4.17.21",
"mitt": "^3.0.1",
"moment": "^2.29.1",
"npm": "^10.8.1",
"nprogress": "^0.2.0",
"object-path": "^0.11.8",
"only-allow": "^1.2.1",
"perfect-scrollbar": "^1.5.5",
"pinia": "^2.1.7",
"pinia-plugin-persistedstate": "^3.2.1",
"pusher-js": "^8.3.0",
"socicon": "^3.0.5",
"splitpanes": "^3.1.5",
"stream-browserify": "^3.0.0",
"sweetalert2": "11.11.1",
"timers-browserify": "^2.0.12",
"typescript": "^5.4.5",
"unplugin-icons": "^0.19.0",
"unplugin-vue-components": "^0.27.0",
"uuid": "^9.0.1",
"v-resize-observer": "2.1.0",
"vite": "^5.4.10",
"vite-plugin-chunk-split": "^0.5.0",
"vite-plugin-compression2": "^1.1.1",
"vite-plugin-static-copy": "^1.0.5",
"vue": "3.4.38",
"vue-axios": "^3.4.0",
"vue-fullscreen": "^3.1.1",
"vue-global-events": "3.0.1",
"vue-google-autocomplete": "^1.1.2",
"vue-howler": "^0.7.0",
"vue-i18n": "^9.13.1",
"vue-infinite-loading": "3.0.0-alpha.0-0",
"vue-inline-svg": "^3.1.3",
"vue-material-design-icons": "^5.0.0",
"vue-multiselect": "^3.0.0",
"vue-router": "^4.3.3",
"vue-select": "^4.0.0-beta.6",
"vue-swatches": "^2.1.1",
"vue-toastification": "^2.0.0-rc.5",
"vue-validate": "^1.0.1",
"vue3-avatar": "^3.0.0",
"vue3-perfect-scrollbar": "^2.0.0",
"vue3-smooth-dnd": "^0.0.6",
"vuedraggable": "^4.1.0",
"x-data-spreadsheet": "^1.1.9",
"xml2js": "^0.6.2",
"ziggy-js": "^2.2.1"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 10"
],
"devDependencies": {
"@vue/compiler-sfc": "^3.4.26",
"@vue/eslint-config-prettier": "^9.0.0",
"eslint": "^9.3.0",
"eslint-config-prettier": "^9.1.0",
"eslint-plugin-vue": "^9.21.0",
"prettier": "3.3.2",
"sass": "^1.77.5",
"vite-plugin-node-polyfills": "^0.22.0"
},
"pnpm": {
"overrides": {
"minimist": "1.2.6",
"node-fetch": "2.6.7"
}
}
}
vite.config.js
import { resolve } from "path";
import { defineConfig, loadEnv } from "vite";
import laravel from "laravel-vite-plugin";
import vue from "@vitejs/plugin-vue";
import vueJsx from "@vitejs/plugin-vue-jsx";
import ckeditor5 from '@ckeditor/vite-plugin-ckeditor5';
// bootstrap, icons
import { BootstrapVueNextResolver } from "unplugin-vue-components/resolvers";
import Icons from "unplugin-icons/vite";
import Components from "unplugin-vue-components/vite";
import IconsResolve from "unplugin-icons/resolver";
import { chunkSplitPlugin } from "vite-plugin-chunk-split";
import { compression } from "vite-plugin-compression2";
import { viteStaticCopy } from "vite-plugin-static-copy";
import { nodePolyfills } from "vite-plugin-node-polyfills";
export default ({ mode }) => {
process.env = {...process.env, ...loadEnv(mode, process.cwd())};
const plugins = [
laravel({
input: ["resources/main.js"],
refresh: true
}),
vue({
template: {
transformAssetUrls: {
// The Vue plugin will re-write asset URLs, when referenced
// in Single File Components, to point to the Laravel web
// server. Setting this to `null` allows the Laravel plugin
// to instead re-write asset URLs to point to the Vite
// server instead.
base: null,
// The Vue plugin will parse absolute URLs and treat them
// as absolute paths to files on disk. Setting this to
// `false` will leave absolute URLs un-touched so they can
// reference assets in the public directly as expected.
includeAbsolute: false
}
}
}),
vueJsx(),
Components({
resolvers: [BootstrapVueNextResolver(), IconsResolve()],
dts: true
}),
Icons({
compiler: "vue3",
autoInstall: true
}),
ckeditor5( { theme: resolve( __dirname + '/node_modules/@ckeditor/ckeditor5-theme-lark' ) } ),
compression(),
nodePolyfills()
];
// NOTE: elsewhere always use import.meta.env for vite usage. it is not loaded yet here though
if (process.env.NODE_ENV === "production") {
plugins.push(chunkSplitPlugin());
plugins.push(compression());
}
let serverConfig = {
host: process.env.VITE_SERVER_HOST_CONTAINER || "php",
port: process.env.VITE_SERVER_PORT || 5173,
hmr: {
host: "localhost",
protocol: "ws"
},
watch: {
usePolling: true
}
}
return defineConfig({
define: {
"process.env": process.env // in case node_modules packages use process.env
},
plugins: plugins,
resolve: {
extensions: [".vue", ".js", ".mjs", ".cjs"],
alias: {
"@": resolve(__dirname + "/resources"),
'~bootstrap': resolve(__dirname + '/node_modules/bootstrap'),
}
},
base: "./",
build: {
sourcemap: false,
manifest: "manifest.json",
rollupOptions: {
external: []
}
},
server: serverConfig
});
}
I can't give you repo access, but I can paste our
package.jsonandvite.config.jsif that helps:package.json
{ "name": "foobar", "version": "1.1.0", "private": true, "type": "module", "scripts": { "preinstall": "npx only-allow pnpm", "dev": "vite --host", "build": "vite build", "lint": "eslint --ext .vue --ignore-path .gitignore --fix resources", "format": "prettier . --write" }, "engines": { "node": "^20.13.1" }, "dependencies": { "@casl/ability": "^6.7.1", "@casl/vue": "^2.2.2", "@ckeditor/ckeditor5-basic-styles": "^41.4.2", "@ckeditor/ckeditor5-build-decoupled-document": "^41.4.2", "@ckeditor/ckeditor5-essentials": "^41.4.2", "@ckeditor/ckeditor5-font": "^41.4.2", "@ckeditor/ckeditor5-link": "^41.4.2", "@ckeditor/ckeditor5-paragraph": "^41.4.2", "@ckeditor/ckeditor5-table": "^41.4.2", "@ckeditor/ckeditor5-theme-lark": "^41.4.2", "@ckeditor/ckeditor5-vue": "^5.1.0", "@ckeditor/vite-plugin-ckeditor5": "^0.1.3", "@fortawesome/fontawesome-free": "^6.5.2", "@he-tree/vue3": "^1.2.9", "@highlightjs/vue-plugin": "^2.1.2", "@mdi/font": "^7.4.47", "@pdftron/webviewer": "^10.9.0", "@popperjs/core": "^2.11.8", "@sentry/vite-plugin": "^2.16.1", "@sentry/vue": "^8.9.1", "@syncfusion/ej2-base": "^26.1.35", "@syncfusion/ej2-data": "^26.1.35", "@syncfusion/ej2-icons": "^26.1.35", "@syncfusion/ej2-navigations": "^26.1.35", "@syncfusion/ej2-vue-base": "^26.1.35", "@syncfusion/ej2-vue-buttons": "^26.1.35", "@syncfusion/ej2-vue-calendars": "^26.1.35", "@syncfusion/ej2-vue-dropdowns": "^26.1.35", "@syncfusion/ej2-vue-grids": "^26.1.35", "@syncfusion/ej2-vue-inputs": "^26.1.35", "@syncfusion/ej2-vue-layouts": "^26.1.35", "@syncfusion/ej2-vue-lists": "^26.1.35", "@syncfusion/ej2-vue-navigations": "^26.1.35", "@syncfusion/ej2-vue-pivotview": "^26.1.35", "@syncfusion/ej2-vue-popups": "^26.1.35", "@syncfusion/ej2-vue-richtexteditor": "^26.1.35", "@syncfusion/ej2-vue-schedule": "^26.1.35", "@syncfusion/ej2-vue-splitbuttons": "^26.1.35", "@vitejs/plugin-vue": "^5.0.5", "@vitejs/plugin-vue-jsx": "^4.0.0", "@vojtechlanka/vue-tags-input": "^3.1.1", "@vueform/toggle": "^2.1.4", "@vuelidate/core": "^2.0.3", "@vuelidate/validators": "^2.0.3", "@zanmato/vue3-treeselect": "^0.2.0", "autoprefixer": "^10.4.4", "axios": "^1.7.2", "axios-mock-adapter": "^1.20.0", "bootstrap": "^5.3.3", "bootstrap-vue-next": "^0.19.0", "ckeditor5": "^43.0.0", "clipboard": "^2.0.8", "core-js": "^3.37.0", "cross-env": "^7.0.3", "deepmerge": "^4.2.2", "dropzone": "^5.9.3", "helper-js": "^3.1.5", "highlight.js": "^11.9.0", "javascript-time-ago": "^2.3.10", "jszip": "^3.10.1", "laravel-echo": "^1.16.1", "laravel-vite-plugin": "^1.0.4", "less": "^4.1.2", "line-awesome": "^1.3.0", "lodash": "^4.17.21", "mitt": "^3.0.1", "moment": "^2.29.1", "npm": "^10.8.1", "nprogress": "^0.2.0", "object-path": "^0.11.8", "only-allow": "^1.2.1", "perfect-scrollbar": "^1.5.5", "pinia": "^2.1.7", "pinia-plugin-persistedstate": "^3.2.1", "pusher-js": "^8.3.0", "socicon": "^3.0.5", "splitpanes": "^3.1.5", "stream-browserify": "^3.0.0", "sweetalert2": "11.11.1", "timers-browserify": "^2.0.12", "typescript": "^5.4.5", "unplugin-icons": "^0.19.0", "unplugin-vue-components": "^0.27.0", "uuid": "^9.0.1", "v-resize-observer": "2.1.0", "vite": "^5.4.10", "vite-plugin-chunk-split": "^0.5.0", "vite-plugin-compression2": "^1.1.1", "vite-plugin-static-copy": "^1.0.5", "vue": "3.4.38", "vue-axios": "^3.4.0", "vue-fullscreen": "^3.1.1", "vue-global-events": "3.0.1", "vue-google-autocomplete": "^1.1.2", "vue-howler": "^0.7.0", "vue-i18n": "^9.13.1", "vue-infinite-loading": "3.0.0-alpha.0-0", "vue-inline-svg": "^3.1.3", "vue-material-design-icons": "^5.0.0", "vue-multiselect": "^3.0.0", "vue-router": "^4.3.3", "vue-select": "^4.0.0-beta.6", "vue-swatches": "^2.1.1", "vue-toastification": "^2.0.0-rc.5", "vue-validate": "^1.0.1", "vue3-avatar": "^3.0.0", "vue3-perfect-scrollbar": "^2.0.0", "vue3-smooth-dnd": "^0.0.6", "vuedraggable": "^4.1.0", "x-data-spreadsheet": "^1.1.9", "xml2js": "^0.6.2", "ziggy-js": "^2.2.1" }, "browserslist": [ "> 1%", "last 2 versions", "not ie <= 10" ], "devDependencies": { "@vue/compiler-sfc": "^3.4.26", "@vue/eslint-config-prettier": "^9.0.0", "eslint": "^9.3.0", "eslint-config-prettier": "^9.1.0", "eslint-plugin-vue": "^9.21.0", "prettier": "3.3.2", "sass": "^1.77.5", "vite-plugin-node-polyfills": "^0.22.0" }, "pnpm": { "overrides": { "minimist": "1.2.6", "node-fetch": "2.6.7" } } }vite.config.js
import { resolve } from "path"; import { defineConfig, loadEnv } from "vite"; import laravel from "laravel-vite-plugin"; import vue from "@vitejs/plugin-vue"; import vueJsx from "@vitejs/plugin-vue-jsx"; import ckeditor5 from '@ckeditor/vite-plugin-ckeditor5'; // bootstrap, icons import { BootstrapVueNextResolver } from "unplugin-vue-components/resolvers"; import Icons from "unplugin-icons/vite"; import Components from "unplugin-vue-components/vite"; import IconsResolve from "unplugin-icons/resolver"; import { chunkSplitPlugin } from "vite-plugin-chunk-split"; import { compression } from "vite-plugin-compression2"; import { viteStaticCopy } from "vite-plugin-static-copy"; import { nodePolyfills } from "vite-plugin-node-polyfills"; export default ({ mode }) => { process.env = {...process.env, ...loadEnv(mode, process.cwd())}; const plugins = [ laravel({ input: ["resources/main.js"], refresh: true }), vue({ template: { transformAssetUrls: { // The Vue plugin will re-write asset URLs, when referenced // in Single File Components, to point to the Laravel web // server. Setting this to `null` allows the Laravel plugin // to instead re-write asset URLs to point to the Vite // server instead. base: null, // The Vue plugin will parse absolute URLs and treat them // as absolute paths to files on disk. Setting this to // `false` will leave absolute URLs un-touched so they can // reference assets in the public directly as expected. includeAbsolute: false } } }), vueJsx(), Components({ resolvers: [BootstrapVueNextResolver(), IconsResolve()], dts: true }), Icons({ compiler: "vue3", autoInstall: true }), ckeditor5( { theme: resolve( __dirname + '/node_modules/@ckeditor/ckeditor5-theme-lark' ) } ), compression(), nodePolyfills() ]; // NOTE: elsewhere always use import.meta.env for vite usage. it is not loaded yet here though if (process.env.NODE_ENV === "production") { plugins.push(chunkSplitPlugin()); plugins.push(compression()); } let serverConfig = { host: process.env.VITE_SERVER_HOST_CONTAINER || "php", port: process.env.VITE_SERVER_PORT || 5173, hmr: { host: "localhost", protocol: "ws" }, watch: { usePolling: true } } return defineConfig({ define: { "process.env": process.env // in case node_modules packages use process.env }, plugins: plugins, resolve: { extensions: [".vue", ".js", ".mjs", ".cjs"], alias: { "@": resolve(__dirname + "/resources"), '~bootstrap': resolve(__dirname + '/node_modules/bootstrap'), } }, base: "./", build: { sourcemap: false, manifest: "manifest.json", rollupOptions: { external: [] } }, server: serverConfig }); }
devtools popup What is shown here? Is there any other information output on the page?
devtools popup What is shown here? Is there any other information output on the page?
What do you mean by "is there any information output on the page" ?
devtools-chrome.zip I am trying to fix it, can someone install this zip package to help me try it? 🙏
devtools-chrome.zip I am trying to fix it, can someone install this zip package to help me try it? 🙏
@GTCrais Do you have time to try this? 🙏
devtools-chrome.zip I am trying to fix it, can someone install this zip package to help me try it? 🙏
Checking...
I have installed the extension, and i opened the devtools which by surprise showed the Vue tab, when i clicked it however it kept showing the Loader with the Vue logo. Then I refreshed the page and it was gone again.
However I see something I did not notice before, there is an error showing in my console, which i thought was just one of those random errors from our code when not accessing a prop correctly, but this is actually initiated by the vuejs devtools.
So it seems the prepare.js is calling functions from outside the devtools?
I have installed the extension, and i opened the devtools which by surprise showed the Vue tab, when i clicked it however it kept showing the Loader with the Vue logo. Then I refreshed the page and it was gone again.
However I see something I did not notice before, there is an error showing in my console, which i thought was just one of those random errors from our code when not accessing a prop correctly, but this is actually initiated by the vuejs devtools.
So it seems the prepare.js is calling functions from outside the devtools?
Yes, prepare.js try to inject some logic into the user environment. Can you try to fix this error and try again? Or do you have other projects that can't show vue devtools either?
Yes, our other project i did not test, i will check this tomorrow. Maybe someone else can check aswell.
From: Arlo @.> Sent: Thursday, October 31, 2024 4:44:00 PM To: vuejs/devtools @.> Cc: timmeijers @.>; Author @.> Subject: Re: [vuejs/devtools] Vue.js devtools no longer showing the Vue tab in my console. (Issue #652)
I have installed the extension, and i opened the devtools which by surprise showed the Vue tab, when i clicked it however it kept showing the Loader with the Vue logo. Then I refreshed the page and it was gone again.
However I see something I did not notice before, there is an error showing in my console, which i thought was just one of those random errors from our code when not accessing a prop correctly, but this is actually initiated by the vuejs devtools.
So it seems the prepare.js is calling functions from outside the devtools?
Yes, prepare.js try to inject some logic into the user environment. Can you try to fix this error and try again? Or do you have other projects that can't show vue devtools either?
— Reply to this email directly, view it on GitHubhttps://github.com/vuejs/devtools/issues/652#issuecomment-2450207337, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AASZMHDWA2CDSWUUOMLMCNDZ6JF4BAVCNFSM6AAAAABQ4BXNJ6VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDINJQGIYDOMZTG4. You are receiving this because you authored the thread.Message ID: @.***>
I tried to fix it in v7.6.2. Could anyone who issue this problem in Vue3 project help me test it? 🙏
I saw this code i had an error on was never used in our application, so i removed it, after removing it, my project no longer loaded the website. with the following error.
However i find it strange the vue.js devtools calls functions in our code and triggers errors. With the extension disabled, the website loads without any issues. Same for usage of v6.
I saw this code i had an error on was never used in our application, so i removed it, after removing it, my project no longer loaded the website. with the following error.
However i find it strange the vue.js devtools calls functions in our code and triggers errors. With the extension disabled, the website loads without any issues. Same for usage of v6.
Does it work with v6? Or will it also cause the site to crash? Is there any way to provide console error or more information? This will help us locate the issue. Thank you