i often see only <root> tag in components in vue devtool. If i search a specific component in page, it display like you see on picture below right sight. When i reload page a few times it appears all the tree but in next reload it disappear again.
I'm performing this issue for Vue dev tool for all browser. (chrome, firefox, and edge)
Vue3 + Pinia + vueX
Related
I'm building a Vue.js app that will be run on devices where I don't have access to a dev tools console, such as a game console. I've created a vue DebugPanel component that contains several tabs, one of them being a "log" to write to.
The UI is mostly working as I expect, but now I need to actually take what's in the console and have it output to the element in the component.
I'd like to use this solution of hijacking the consol.log function. This solution works great in a non-vue HTML page, but I'm having trouble with the best way to incorporate it into a Vue.js app.
The issue I'm having is that each tab section on my DebugPanel is hidden/shown based on a v-if attribute. The log element is only in the DOM when its tab element shown. So a call to document.getElementById errors.
Any thoughts on how to implement this in Vue.js?
You can just use Vuex store to pass data through all the app. And i think it would be better to use it in your app for global data.
I am trying to use one of the Material Design Lite templates inside my Vue.js application.
What happens is, when I am routed(using this.$router.push('/templateX') to the next page, the component is not fully rendered(I can see only the header).
What is really interesting, when I take a look at the source section inside the browser console, I can see that the template is loaded but not fully rendered.
Once I reload the page, then the whole template is rendered and everything is shown as expected.
I think the problem is in the component life cycle but I am not sure what shall I do exactly. Any thoughts?
I have installed VueJS chrome extension:
VueJS chrome extension
but I find it quite useless unless I am missing something. So I posted the question here if some one can provide what I am missing.
I setup this vuejs project:
Kazoo on github
This project has several vue components but most of these components do not show up in vuejs chrome extension. This is the screenshot:
The Vue devtools show the application as you are viewing it now (just like the DOM viewer shows you the DOM elements that are currently on the page). Clicking a component will show you the internal state of that component, such as props and data. This allows you to infer where a problem may be originating when you see a bug occur in your application. It also allows you to figure out if the correct components are being loaded. It does not show you components that are currently not in the document, as it would not be useful.
The vuex tab will allow you to inspect the entire store, and all mutations that have been done and with what payload since the vue devtools initialised. It will show you what is computed by the getters.
The Events tab will show you which events have been fired. This may be particularly nice if you have a framework that uses them, or if you use global events yourself.
Is it possible to use VusJS Components into Moqui Screens?
I know for sure that you can render Basic HTML but I wasn't able to find a hook for the VueJS app.
The need comes from the following scenario:
While form-single widget can be made collapsible, form-list cannot. So I wanted to use vue-collapsible (https://github.com/vue-comps/vue-collapsible) but I don't know where I am supposed to register the component.
If there's no way to use vue, maybe you can help me with my concrete issue.
In the 'vuet' render mode which is used in the /vapps path (as opposed to /apps) it isn't actually HTML sent to the client it is a Vue Template. If you look at the text returned by the server you'll see a number of Vue Components already being used (see the WebrootVue.js file for their source). You can see this in Chrome using the Sources or Network tab in the tools window or similar tools in other browsers. If you inspect an element you'll be looking at the rendered HTML, ie after Vue runs the components to change the Vue Template to HTML.
This means that if you include the necessary JavaScript file(s), and CSS file(s) if needed, then you can use any Vue component in the Vue Template returned. You can do this inline in XML Screen files using the render-mode.text element with the #type=vuet.
None of this runs under NPM in the way VueJS is used in Moqui Framework through XML Screens. In other words it isn't a pre-packaged Vue app with 100% client/browser rendering but rather is a hybrid client and server rendered approach.
You can include scripts in this Moqui hybrid approach using the script element with a #src attribute for the script file which the WebrootVue.js file loads on the fly. There are various examples of this for additional JS scripts like Chart.JS
I'm using VueJS with VueX state manager, and for some reason the component only renders when i click on the component in devtools / when i resize the screen / open inspection tool.
I have implemented the same structure of code as in the examples.
Has anyone experienced that behavior ?
https://gifyu.com/images/20170227-133511_capture.gif