vuejs / vuejs/devtools

[Feature request] Inspector auto-opens when using Chrome Vue DevTools and vite-plugin-vue-devtools together

Open
#1,004 2 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
2.9k
Forks
279
PR merge metrics
No merged PRs in 30d

Description

Problem Description

When developing a frontend project with both Chrome Vue DevTools and vite-plugin-vue-devtools installed, selecting a component using Chrome Vue DevTools’ “Select component in the page” or inspecting a component triggers the following issues:

  • vite-plugin-vue-devtools automatically opens its Inspector panel, causing interference.
  • It is not possible to fully disable or prevent the in-page Inspector overlay from vite-plugin-vue-devtools.
  • The overlay negatively affects the page interaction experience.

Expected Behavior

  • When used together with Chrome Vue DevTools, each Inspector should operate independently without triggering the other.
  • Provide configuration options to completely disable the in-page Inspector overlay from vite-plugin-vue-devtools.

Additional Notes

The overlay UI displayed on top of the page significantly affects interactions.
When testing mobile layouts, this popup may take up a large portion of the screen, and closing the devtools panel might also close the popup unintentionally.

https://github.com/user-attachments/assets/e53d9403-ce43-4f49-8d90-efb3667e84e7

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reproducing the interaction with Chrome Vue DevTools and vite-plugin-vue-devtools together, focusing on component selection and the in-page Inspector overlay. Review the existing Inspector behavior and configuration options. Done means the Inspectors operate independently and the overlay can be completely disabled.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript, vite
Domain
devtools, frontend
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Active
Clarity
Mostly clear
Newbie friendliness
52/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.