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.
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:
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
Related
I've installed the beta of Vue.js devtools in both Chrome and Microsoft Edge. When I load a vue web page that I'm running locally it shows
Vue.js is detected on this page.
Devtools inspection is not available because it's in production mode or explicitly disabled by the author.
I've also tried setting
app.config.devTools = true;
in main.js but it has no effect.
This is for Vue.js 3.
Is there a Vue devtools browser extension that works with Vue 3?
Vue tools finally started working again after I did a yarn install on the project.
I have a legacy web application which I have introduced Vue into in a few places, via CDN. I have upgraded it from Vue 2 to Vue 3. There is a component used there which breaks with Vue 3, but there is a Vue 3 version of it. However, the author states this: "The component is packaged mainly for use with bundlers, if you require a browser build - post an issue." I do require a browser build. Is there some easy way I can do this for myself? I wasn't planning to use a bundler for this application, so I'm hoping I can use the existing modules to create a .js file I can use from the browser?
I am trying to integrate Tiny MCE editor with Vue js, I installed this package with npm
https://www.npmjs.com/package/vue-tinymce-editor
In the reseuces / js / app.js source file, I imported the component
import tinymce from 'vue-tinymce-editor'
Vue.component('tinymce', tinymce);
The component was created simply like this
<tinymce id="1"
:other_options="tinyOptions"
v-model="menu"></tinymce>
'menu' is the variable in vue data js.
Vue does not report errors in the Chome console, in fact the component renders correctly. The problem is that it works with the Safari browser and not with others such as Google Chrome. A bug in all respects. Has anyone faced this problem before?
I attach the screenshots of the two views on Safari and Chrome.
Chrome bugSafari works
Using snowpack with the Vue template. Just set it up. But chrome dev-tools says it doesn't recognize it as
vue.
I have deployed a basic Vue template app with vue-cli and this one get recognized as Vue. So the use Vue for local files is working correctly.
Not sure what it needs more or if it's something specific with snowpack
Using vue 3 and chrome dev-tools probably doesn't support it yet.
I am facing difficulties with my VueJS deployment. I have an accordion based on this : https://bootstrap-vue.org/docs/components/collapse#accordion-support
Everything works perfectly on my local project but when deployed on Netlify, it seems that the accordion is completely broken, first tab open and clicks on others dont trigger anything.
There is nothing appearing in my console.
I wonder if I need to include jQuery or Bootstrap in my app or bootstrap Vue is supposed to make them useless ?
Thanks