How to access Vue from Chrome console?

I’m not talking about the Vue Chrome extension - I mean the standard Chrome javascript console. If I wanted to push some data into the Vuex state from the command line, how would I do it? I’m not sure how to access the Vue instance from the console.

Assuming you use a modular setup, you can’t do this without either logging the main instance to console, or saving it to a global variable (window.App = new Vue(....)), because any variable you create inside your main.js fiel will still not be globally available due to how webpack et.al. work.

6 Likes

Thanks - and is it a bad idea to save it to window.App ?

not really. It’s generally not a good practice to “pollute” the global namespace with too many variables, but if you can control your environment and it’s only this one, that’s worth it :wink:

Update from 2018. If you use vue-devtools, you can access Vue from console by selecting desired component, and then accessing it through $vm variable. Check the image with example:

20 Likes

TLDR; Select the element you mounted your app on. Assuming its referenced in $0 run following in console:

$vm = $0.__vue__

You can see this is how vue dev tools gets the reference to the vue instance. Any dom element that has a vm attached to it will have vm property on it which will be a pointer to the $vm.

4 Likes

Similarly: document.querySelector('#app').__vue__

This is useful when running browser tests, e.g. through puppeteer, and you need to mock something on the browser side, like a Vuex store containing user authentication info.

2 Likes