Menu
I know I can add a global property like so:
Vue.prototype.$thing = { foo: 'bar' };
and I know I can update that instance prop with:
Vue.prototype.$thing = Vue.observable({ foo: 'bar' })
But how can I view this property in the dev tools? Specifically, how do I get this instance property to display in the data tree along with the other properties defined in the data prop?
644
Google Chrome: Right click on vue-devtools icon and click "Manage Extensions" then search for vue-devtools on the extensions list.
A Watcher in Vue. js is a special feature that allows one to watch a component and perform specified actions when the value of the component changes. It is a more generic way to observe and react to data changes in the Vue instance. Watchers are the most useful when used to perform asynchronous operations.
el property mounts the Vue application on a given DOM element. render property renders passed root component (it can do much more but for now this knowledge is just enough) object returned by data property is a state of our component. methods property contains functions that can modify the state.
How to use the Developer Tools As mentioned, the Vue DevTools can be activated by opening the Developer Tools in the browser and moving to the Vue panel. Another option is to right-click on any element in the page, and choose “Inspect Vue component”: When the Vue DevTools panel is open, we can navigate the components tree.
We can add instance properties to our Vue instance by adding properties to the Vue.prototype property. Then we can instantiate the Vue instance, we can get the property by this.$appName . Then we’ll see 'example app' in the console.
After all that, you should start seeing your components in "Vue" tab of developer tools. You might see Anonymous component for some components, but all you need is name: app which is something you are already doing in your App.vue component. Show activity on this post.
There may be data/utilities you’d like to use in many components, but you don’t want to pollute the global scope. In these cases, you can make them available to each Vue instance by defining them on the prototype: Now $appName is available on all Vue instances, even before creation. If we run: Then "My App" will be logged to the console!
Vue's DevTools (in Vue 2) work by finding a root level Vue node (Any DOM node with __vue__ attached to its prototype) and displaying the associated "vm " properties. Basically unless you use the Vue-specific ways of hooking up data, it won't show up.
It looks like you might want to add some information to some (or all!) of your components. You can do this with a plugin or with provide/inject.
While you can set it based on the prototype on the Vue module, I would really suggest using the built-in capabilities of Vue to do this... mainly because your approach will not work whatsoever in Vue 3. There is no support for prototype modification in Vue 3 because of composition API support. Additionally, prototype modification makes it very difficult to test with Vue Test Utils and the createLocalVue method that you need to use for component testing.
Plugins are how VueI18n, VueRouter, and Vuex work. That looks like doing Vue.use() and then passing in a configuration object into new Vue({}). The docs for plugins. In Vue 2, they actually have a secondary, headless Vue instance that they mount to manage reactive data.
I don't know what your use case is, but I would suggest using Vuex for managing reactive data throughout your components and is accessible via this.$store in any component. Vue Devtools also has special case logic for displaying Vuex data to the user.
If you do not want Vuex, then you can DIY it via provide/inject or a Provider pattern (this is how vue-styled-components adds its this.$theme object throughout the component hierarchy). Provide/inject data is also visible in the Vue Devtools.
95
Do you use the Vue Dev Tools?
Here is an example on Firefox (chrome is similar)
access it on the console using: $vm0.$thing
1
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
