0

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

enter image description here

Rim
  • 168
  • 3
  • 9
  • There's nothing in devtools that could help this afaik. Notice that a template in SFC is compiled to render function but receives optimizations at compilation time, this is the argument against using raw render functions everywhere. – Estus Flask Oct 03 '22 at 18:07
  • You can't right click on it for some settings I guess + filtering by `-functional` does nothing neither? I mean, you could filter by interesting components (but it's not that good of a solution) or maybe juste skip the functional component part since AFAIK it doesn't bring much to the table (performance wise). – kissu Oct 03 '22 at 19:50
  • There's no `exclude` option for filtering im afraid, but as Estus said, I would change my code to avoid using raw jsx functional component everywhere then – Rim Oct 09 '22 at 16:58

0 Answers0