Filter out components

[buzzysin]

What problem does this feature solve?

I have a small app (about 5 or so components) I am testing that has a few too many AsyncComponentWrappers to unfold. Hopefully this option will reduce the amount of times that the user has to see redundant components in the tree - and if it is necessary for the user, then they can keep it on.

What does the proposed API look like?

Perhaps a checkbox in the Settings menu labelled "Hide AsyncComponentWrappers from tree".

• Hide AsyncComponentWrappers from tree - this option will hide components that are wrapped by defineAsyncComponent wrappers, showing only the children.

I have no idea about the implementation of the devtools so I'm unable to provide any code samples.

[Akryum]

Let's turn this into a more generic feature request!

[Akryum]

My idea would be to have a UI to add filters to the component tree. Each filter could have an option to still display children in the parent tree node.

[imrim12]

Hi @Akryum, can you help me to figure out how to filter out functional components (JSX) in vue devtools?

I've already asked this on Stackoverflow
https://stackoverflow.com/questions/73939172/how-to-hide-functional-components-jsx-in-vue-devtools

I'm currently using JSX for Vue component, but currently, the devtool would show a very ugly nested hashed functional component tree like this, is there any way to avoid this? As far as I know, Vue devtools doesn't provide us an option to hide these functional components, therefore this would be very annoying

I'm building a UI package for Form module, I want to use JSX for Vue because that would make contribution much easier when a lot of people from React.js can jump in and help. My package: https://www.npmjs.com/package/formkl

[lefreet]

anything new here ?