Floating button for inspector not showing up

[devtobi]

Description

For some reason the inspector button for the DevTools (next to the Vue button) does not show up when I use the current DevTools as a Vite plugin.

I tested this both on Firefox and Chrome.

Environment information

Operating System: Windows 10 22H2 Node Version: 22.11.0 npm Version: 10.9.0 Vite Version: 5.4.11 Vue Version: 3.5.12 DevTools Version: 7.6.4

Screenshots

[webfansplz]

Can you provide a mini repo? Thanks.

[devtobi]

I created a minimal reproducible example over at: https://github.com/devtobi/devtools-inspector-missing-example

I found that the button appears when I change the configuration of the vite-vue-plugin to include options API.

    vue({
      features: {
        optionsAPI: true, // with false the button disappears
      },
    }),
    vueDevTools()

This lets me guess the Inspector functionality is written using Options API?

Nonetheless, even though the button is visible the functionality to select components is not available.

[webfansplz]

I created a minimal reproducible example over at: https://github.com/devtobi/devtools-inspector-missing-example

I found that the button appears when I change the configuration of the vite-vue-plugin to include options API.

    vue({
      features: {
        optionsAPI: true, // with false the button disappears
      },
    }),
    vueDevTools()

This lets me guess the Inspector functionality is written using Options API?

Nonetheless, even though the button is visible the functionality to select components is not available.

I tried to reproduce it with the repo, but I could not. Any special handle steps or environments?

[devtobi]

I created a minimal reproducible example over at: https://github.com/devtobi/devtools-inspector-missing-example I found that the button appears when I change the configuration of the vite-vue-plugin to include options API.

    vue({
      features: {
        optionsAPI: true, // with false the button disappears
      },
    }),
    vueDevTools()

This lets me guess the Inspector functionality is written using Options API? Nonetheless, even though the button is visible the functionality to select components is not available.

I tried to reproduce it with the repo, but I could not. Any special handle steps or environments?

That's really strange. So it did work on your side even if you set optionsAPI: false? Other then the mentioned versions in the issue description could this be a browser issue? I tried it with both Firefox and Chrome and both browsers had the same behaviour.

[devtobi]

@webfansplz With the new Devtools 7.6.7 everything works fine now. However I still need to set optionsAPI: true

[devtobi]

To validate this issue I just tried this on a completely different machine (personal Mac) and on all major browsers. The behaviour is exactly the same as I already described above (optionsAPI: false breaks the inspector). Just to make sure I updated my example repo to latest Vite 6 and updated the @vitejs/plugin-vue as well. Still not working.@webfansplz Please check out the repo again.

[devtobi]

@webfansplz Do you have any updates on this? I just tried it with the latest version 7.7.0 and it still looks like there is a requirement on the OptionsAPI for the floating button to show. @alexzhang1030 Maybe you can help out here as well?