vite-plugin-checker-error-overlay custom element is shown as a separate root component in Vue Devtools
Describe the bug
I'm not entirely sure if this is a bug or intended to be like this, but after upgrading vite-plugin-checker to version 0.9.0 I started seeing the custom element "vite-plugin-checker-error-overlay" in Vue Devtools as a separate root component. When developing, if you have to refresh the page several times, you also have to select the right component from Devtools, instead of the component being developed being directly visible in the tool, as it normally is. This causes multiple extra clicks which is really frustrating.
Tested with following Vue & Vite versions:
"vue": "^3.5.13",
"vite": "^6.2.0"
Reproduction
- Update vite-plugin-checker to version 0.9.0
- Start your application and open Vue devtools
- See that there's a "VueElement" root component shown in "Components" tab
Expected behavior
Vue Devtools should ignore the vite-plugin-checker-error-overlay component as in version 0.8.0:
System Info
System:
OS: macOS 15.3.1
CPU: (12) arm64 Apple M3 Pro
Memory: 548.77 MB / 36.00 GB
Shell: 5.9 - /bin/zsh
Binaries:
Node: 20.14.0 - ~/.nvm/versions/node/v20.14.0/bin/node
npm: 10.9.0 - ~/.nvm/versions/node/v20.14.0/bin/npm
Browsers:
Chrome: 133.0.6943.142
Safari: 18.3
npmPackages:
vite-plugin-checker: ^0.9.0 => 0.9.0
Additional context
No response
Validations
- [x] Read the docs.
- [x] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
I think its intended like this @jiikoosol as vite-plugin-checker will mount the overlay as a separate component into your DOM. You can always disable the overlay in the settings and use the console output only.
I've also encountered this issue. If this is intentional, I hope an option can be provided to disable it, or a way to prevent it from showing in Vue DevTools can be shared. This undoubtedly increases the number of clicks for frequent Vue DevTools users.
My workflow has been impacted negatively by this, along with my colleagues. It would be nice to have a way to disable it from showing in Vue DevTools.
I also have this issue and it is rather annoying. If anything, could the entry be made to show later than any other Vue instances in the list? Right now it is defaulting to showing the plugin first; it would be better if the plugin were last in that list...