Differentiate between vue inspector and component tree inspector

[maxirozay]

I just updated all my vue/vite dependencies and installed vue-devtools 7.0.21. I'm on macOS Sonoma 14.4.

When I use the target button inside the components tab, the devtools is minimized, I can select a component on my website and it will open in the devtools. Everything works very well.

When I do the same with the main target button next to the vue icon, the devtools is not minimized, it doesn't do anything in the devtools and open the file with a broken vim in vscode (I can't use vim commands, whatever I do will insert some characters). Basically it does the same as the "open in editor" button does.

Also if I click again on the target it doesn't stop the component selection so it doesn't seem like it's a toggle like its title suggest.

Shouldn't the 2 target button have the same behavior (especially the fact that the devtool is hidden to select the component)?
When the component is opened in the editor is it possible to open the file directly in vscode instead of creating a vim session in the current terminal?

[webfansplz]

Do you mean the open in editor feature? You can follow the documentation to configure it.

[maxirozay]

I mean the main target button next to the vue icon at the bottom (you can also see it when the devtools is minimized), it act like the open in editor button from the components tab and not like the target button in the component tab. So I guess yes it's this feature and it's on purpose which is useful but then why not also hide the devtools when you click on it ?

Thank you for the doc. I installed the code command and the VUE_EDITOR=code env. They both work, I restarted everything and it still open the file with vim inside my vscode terminal. I get the following warnings before it opens vim.

Vim: Warning: Output is not to a terminal
[0] Vim: Warning: Input is not from a terminal

[xuzuodong]

IMO those two buttons should have different icons since they have different behaviors.

[alexzhang1030]

Agree with that, PR welcome.

[maxirozay]

It can be an "edit" pen.

<svg
  xmlns="http://www.w3.org/2000/svg" style="height: 1.1em; width: 1.1em; opacity:0.5;"
  :style="vueInspectorEnabled ? 'opacity:1;color:#00dc82;' : ''" viewBox="0 0 24 24"
>
  <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
    <path d="M4 16 L18 2 L22 6 L8 20 L2 22Z" />
  </g>
</svg>

This one may be a bit too simplistic. If you have a specific icon I can make a PR.

[alexzhang1030]

You can choose one from iconify, then use it by unocss-icon-preset.

Commonly it will be class="i-<icon-name>", like this class="i-carbon-moon"

[maxirozay]

In the overlay package there's no unocss package installed and the target icon is the svg that I edited and pasted in my previous comment. I can copy an icon from iconify to replace the current svg.

[alexzhang1030]

In the overlay package there's no unocss package installed and the target icon is the svg that I edited and pasted in my previous comment. I can copy an icon from iconify to replace the current svg.

Oh, then svg will be good

[maxirozay]

I made a PR with the this icon, I can use another one if there's better.