Why is Vue.js Chrome Devtools not detecting Vue.js?

Question

I have the following code with a simple working Vue.js application. But the vue.js devtools is not responding. It was working well a few days ago, now it\'s not working anymore

Answer 1

Had the same issue and solved it by adding

Vue.config.devtools = true;

after Vue.js import script, then take look at chrome devtools. You will see a tab called Vue to inspect your vue instance.

reference: https://vuejs.org/v2/api/#devtools

Answer 2

in the extensions folder in chrome browser, under the details tab in vue devtools extension, check the box having allow access to file URLs, this worked for me..

Answer 3

I'm using Vue in electron and I have the electron main "app" separated Vue's "app".

When in the the debugger console, typing Vue was giving the error Uncaught ReferenceError: Vue is not defined

Here was my fix

window.vue = new Vue({
  components: {
    App,
    Login,
  },
  router,
  store,
  template: '<App/>',
}).$mount('#app');

The work-around was assigning window.Vue so the devtool could find it.

Answer 4

If you're using Vue 3 and experiencing this issue, try installing the beta version of the Vue Devtools. It may help until the stable version gets the major refactor.

Answer 5

The same problem here, and I've solved it.

If you are developing in the localhost environment and using Chrome Dev Tools then you need to give permission for the Vue.js extension to access the local files on your computer.

• Config your Vue.js tool in Chrome extensions
• Search for "Vue.js devtools"
• Click on details
• Check the "Allow access to file URLs" checkbox

Answer 6

Also you can disable with Vue config: https://vuejs.org/v2/api/#devtools