In the webpack-simple Vue.js template, how can I access the Vue app from the console?

Question

I've created a Vue.js app using vue-cli with the webpack-simple template, and it works great. In the provided main.js, I changed the new Vue(... line to var vm = new Vue(..., so that I could access the Vue instance from the Chrome Dev Console, but the variable vm still shows as undefined.

What is the correct way for me to get a reference to the Vue object so that I can do things like manually generating events in components, or manually modifying data from the console?

Answer 1

Try with window.vm = vm;

var vm  = new Vue({
  el: '#app',
  store,
  template: '<App/>',
  components: { App }
})

window.vm = vm;

And than just type vm in console. Your Vue object will be available now.

Answer 2

Another option is:

1. Do not modify main.js / main.ts generated by vue-cli
2. Install Vue.js devtools (available for Firefox and Chrome)
3. On your Vue-powered website press F12 (open dev console) and go to Vue tab
4. Every component gets assigned to $vmX variable which you can use in the console.