Vue devtools not working with Vue 3 Custom Elements

763 views Asked by At

I am using Vue 3 components purely as custom elements (in ASP.NET MVC views). When I view my site on localhost, after using vue-cli-service to make a non-prod build of the Vue components (all are .ce.vue), the Vue devtools icon "lights up" (in the browser's extensions icons toolbar) indicating that it detects Vue on the page--however, the Vue tab never appears in the Chrome dev tools.

Should the Vue devtools extension work with just Vue custom elements on a page? I tried the troubleshooting steps in the F.A.Q., but none seem to apply. (I also turned off all other extensions and restarted my browser.)

Note: I am using a 32" 4k monitor, so I am definitely seeing the full Chrome dev tools UI. Image of Chrome dev tools for the page hosting the Vue custom element

Note 2: I have tried using the Vue devtools with my custom element rendered in a shadow DOM and without one.

Without a shadow DOM: Without a shadow DOM

With a shadow DOM With a shadow DOM

Here is a link to the Vue.js GitHub issue with a helpful comment for the PR for making the shadow DOM wrapper optional.

defineCustomElement without shadowDom #4314

0

There are 0 answers