How to disable devtools ?

[Mikaleb]

Is there an option to disable this shiny new devtool ?

[Yordan-Ramchev]

This may help: https://vitejs.dev/guide/using-plugins#conditional-application

[Mikaleb]

Not working :/

[alexzhang1030]

Can you unregister vite-plugin-vue-devtools in plugin options of vite.config.{j,t}s?

[gangsthub]

Is there an option to disable this shiny new devtool ?

What is the reason to disable it and what are the conditions to either show it or not? I think you could provide more context about what is it what you expect, @Mikaleb...

[HybridEyeGrillage]

@gangsthub
I was also looking for something like this in the way of only having it enabled in a development environment and disabled in production.
Something like how Inspector does it with a configurable enabled flag, see example below (probably not correct off the top of my head).

vite.config.ts

VueDevTools({
 enabled: process.env === 'development',
 launchEditor: 'code'
}),

[alexzhang1030]

Currently, DevTools will be forcibly enabled during development (vite dev) and will never be bundled in production (vite build). So, don't worry about that.

[LukerSpringtree]

Currently, DevTools will be forcibly enabled during development (vite dev) and will never be bundled in production (vite build). So, don't worry about that.

maybe he want to disable the tool, when the envirment is develop.

just use shotcut to show tool's UI, but don't show the icon always.

[alexzhang1030]

Currently, DevTools will be forcibly enabled during development (vite dev) and will never be bundled in production (vite build). So, don't worry about that.

maybe he want to disable the tool, when the envirment is develop.

just use shotcut to show tool's UI, but don't show the icon always.

You can disable this option to do this.

[eachann1024]

Is there an option to disable this shiny new devtool ?

What is the reason to disable it and what are the conditions to either show it or not? I think you could provide more context about what is it what you expect, @Mikaleb...

I think the corresponding habit settings can be saved in the project's .local, for example:

1. Scenario 1: Enter pinia, open the store / time by default.
2. Project members prefer the chrome extension version of vue dev. You can set whether to enable it in .local.
3. [Critical] At the same time, the settings item reads .local, and developers sometimes need to clear localStorage, resulting in the settings item being repeatedly set.

[gazedash]

You can disable this option to do this.

How to open it again? Lmao... It disappeared and I don't get it how to open it back again.

First, I try to search HOW TO DISABLE IT, spend 10 minutes on it, find old solution, doesn't work
Find this, fine, toggle this thingy, it disappears completely

Are you serious?

I understand that devtools is a good and helpful thing, but UX is severely lacking on this one...

[alexzhang1030]

You can disable this option to do this.

How to open it again? Lmao... It disappeared and I don't get it how to open it back again.

First, I try to search HOW TO DISABLE IT, spend 10 minutes on it, find old solution, doesn't work Find this, fine, toggle this thingy, it disappears completely

Are you serious?

I understand that devtools is a good and helpful thing, but UX is severely lacking on this one...

Yeah, our shortcut descriptions are very lacking 😅. And sorry our contributors are currently very busy and not too active in solving this issue 🥲.

Anyway, this is a brief:

How to disable the devtools anchor?

You can disable the option called Always show the floating panel on the Settings page.

How to open it again?

By shortcut

• cmd + shift + D in macOS
• alt + shift + D in Windows

align with Nuxt devtools.

[dash-]

I love this tool! It's very handy.

Unfortunately, it's also breaking my Cypress tests in my local development environment. I need to be able to programmatically prevent the floating buttons from appearing within Cypress, preferably without removing them completely from my development environment.

[NiklasBeierl]

@dash- Does that mean vue-devtools works for you in a cypress environment? As in: You could actually interact with them in a cypress-driven browser? Because that is what I am trying to achieve at the moment, but they just keep loading forever. (I guess I am having the opposite of your problem).

[tryforceful]

Currently, DevTools will be forcibly enabled during development (vite dev) and will never be bundled in production (vite build). So, don't worry about that.

(cc @alexzhang1030 ) I think this is worth mentioning in the main documentation, or in the FAQ. It's not clear (at least to me, and probably other developers) that the plugin doesn't get included in vite build steps out-of-the-box without any user configuration.

[alexzhang1030]

Currently, DevTools will be forcibly enabled during development (vite dev) and will never be bundled in production (vite build). So, don't worry about that.

(cc @alexzhang1030 ) I think this is worth mentioning in the main documentation, or in the FAQ. It's not clear (at least to me, and probably other developers) that the plugin doesn't get included in vite build steps out-of-the-box without any user configuration.

make sense, I will update it

[WORMSS]

Does anyone have a fix for removing this annoying floating panel thing?

I have the option turned off.. but the thing keeps reappearing?

Other than doing this little hack.

[lbhopper]

Comment out import vueDevTools from 'vite-plugin-vue-devtools' in vite.config.js then comment out vueDevTools() from the plugins