Hiding components from the devtools

When working with component libraries the component tree can become cluttered an hard to read, having a way to hide a selection of components without hiding their children would be nice.

This could be a simple includes/exclude filter somewhere (either in the devtools themselves or in the config) but I think a layer system would be more useful especially if one uses components from various sources or just has a lot of components. How those layers would be defined would depend on the requirements I suppose but a good start could be the name of the package it comes from, a more involved implementation could provide a composable that allows the component to define which layer it wants to be affected to (something like useDevToolsLayer('my-layer')).

Another approach could be to use symbols like - in the "Find components..." field to do a reverse search but that would not be intuitive and would also requires to set this value manually every time you refresh the page.

related issue in vuejs/devtools-v6 Hide components from the vue-devtools #1290

Start by reviewing the related vuejs/devtools-v6 issue and locating the devtools component-tree and “Find components...” entry points. Clarify whether the goal is filtering, persistent reverse search, or a layer system, including how child components should remain visible. Done means a defined hiding behavior and an agreed implementation scope.