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

user_712486 0
Viewed 2541

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?

vue.js
3 Answers

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.

user_36226060

Do you use the Vue Dev Tools?

Here is an example on Firefox (chrome is similar)

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

Vue Dev Tools

user_16564590

The variable you declare with prototype and one in the $root's data function are not the same.

prototype by deffinition:

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.

So you can use this $thing in every child component as this.$thing. (Also pay attention to conflicts)

However when you declare it in the $root's data(), you can refer to it as this.$root.$thing in child components.

In summary

Declare: this.prototype.$thing = 'foo'

Use: this.$thing (in every child component)

vs

Declare:

new Vue({
    data() {
        return {
            $thing: 'foo'
        }
    },
});

Use: this.$root.$thing

user_136792730
Related