Vue.js - how to display my Vue instance property in dev tools?

Question

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?

Answer 1

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.

Important

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

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.

Provide/Inject

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.

Answer 2

Do you use the Vue Dev Tools?

Here is an example on Firefox (chrome is similar)

access it on the console using: $vm0.$thing