Vue Devtools tab doesn't show up

[mrcego]

Although Vue devtools icon is light up, Vue tab from browser devtools is not showing up. Look like some code should be included for this to Web Component support.

Start point: https://mokkapps.de/vue-tips/force-enable-vue-devtools-in-production-build/

[EranGrin]

@mrcego glad to see that you found another issue 😄, I'll check it soon

[mrcego]

I'm playing with some options, this is one: https://stackblitz.com/edit/vue-web-component-wrapper-iduyws?file=demo-app-vite%2Fvite.config.ts&startScript=vite-demo

It needs manually set width, height and top values via devtools, you know, because we are working in swampy land with styles 😁

The issue here is how to talk with inspector to indicate correct tag for shadow DOM.

[EranGrin]

@mrcego, I don't think I'll have time to dive into this before my holiday, I'll be gone on Monday for one week. I did start to look at the issue, but I still didn't manage to conclude what is the root cause of the issue, I'll be glad to receive any insights

[EranGrin]

@mrcego It took much longer than expected, I did have 2 failed attempts a few months ago and finally yesterday I had could find time to deep dive into this as solving this was quite a challenge. Not all the vue dev tool features will probably work, but this is a first version and if needed we can explore more aspects

[mrcego]

@mrcego It took much longer than expected, I did have 2 failed attempts a few months ago and finally yesterday I had could find time to deep dive into this as solving this was quite a challenge. Not all the vue dev tool features will probably work, but this is a first version and if needed we can explore more aspects

I think this issue should be marked as won't fix temporary due to Vue devtools limitations with Shadow-DOM handling.

Although is a good challenge, core team is not expected fix this anytime soon, besides feature development implies wait for api estability for Custom Elements and the brand new Vue Devtools for Vite. See issue: https://github.com/webfansplz/vite-plugin-vue-devtools/issues/60

[EranGrin]

I think this issue should be marked as won't fix temporary due to Vue devtools limitations with Shadow-DOM handling.

I'm not sure if you understood me correctly, the Vue devtools does work now but might have some issues with certain features

[mrcego]

I think this issue should be marked as won't fix temporary due to Vue devtools limitations with Shadow-DOM handling.

I'm not sure if you understood me correctly, the Vue devtools does work now but might have some issues with certain features

Yeah, I think I misunderstood your words, sorry.

Let me check your approach to see what we can do with those issues.

[EranGrin]

Let me check your approach to see what we can do with those issues.

Great, looking forwards to your review

[EranGrin]

@mrcego can I close this issue ?

[mrcego]

Hey @EranGrin !!

Sorry, I haven't had enough time to review this. If you think it is feasible closing issue, go ahead and we could talk about it in the future.

Regards!

[rafael8lopes]

I think this issue should be marked as won't fix temporary due to Vue devtools limitations with Shadow-DOM handling.

I'm not sure if you understood me correctly, the Vue devtools does work now but might have some issues with certain features

How did you make it work? On a different project when I set up Vue using custom element config, the plugin was loaded broken.

import vue from '@vitejs/plugin-vue'; vue({customElement: true})

[EranGrin]

Hi @rafael8lopes, hard to tell...can you provide some more details regarding your environment condition are you sure you are using the vue-web-component-wrapper latest version and not the @vue/web-component-wrapper? Did you try to use the example project?

Apart from this, vue dev tool only have limited support at the moment, but I'm open for suggestions.

[rafael8lopes]

For others that could have the same problem using @vitejs/plugin-vue, here's the proper vue config:

vue({ customElement: /^(?!.*vue-devtools)/ });

[EranGrin]

Ok, it seems like you are referring to a use-case of where VueDevTools is add to the vite config import VueDevTools from 'vite-plugin-vue-devtools', and therefore vue({ customElement: /^(?!.*vue-devtools)/ }) would make sense, but based on my testing, if one uses the normal VueDevTools plugin for chrome vue({ customElement: true }) did seem to work as well