Skip to content

feat: Auto-hide top panel when only one app instance, and filter DevTools' internal components #927

@rhzone

Description

@rhzone

🆒 Your use case

When I open the Vue component inspector in Nuxt DevTools, the top panel (green bar with component selector) always shows multiple DevTools' internal Vue instances like "VueElement (3.5.26)" appearing twice.

Main issue: When there's only one application instance to debug, this top panel is unnecessary and just takes up screen space. I can't close or hide it.

These DevTools UI components clutter the inspector and make it harder to focus on my actual application components.

🆕 The solution you'd like

Primary request: The top panel should automatically hide when there's only one application instance, since there's nothing to switch between.

Additionally:

  1. Filter out DevTools' internal components (like VueElement) from the component tree by default
  2. Provide a manual toggle/close button on the top panel for cases when users want to hide it
  3. Optionally provide a setting to "Show DevTools internal components" for advanced debugging

This would maximize screen space and keep the inspector focused on the actual application being developed.

ℹ️ Additional info

Thanks for the amazing work on Nuxt DevTools! This enhancement would make the developer experience even better.

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions