CODEWITHSUNDEEP
vue.jsgoogle-chromevue-devtools
Simon Suh
Simon Suh

Reputation: 10882

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

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 what could possibly be going wrong? when I go to webstore, it says it is already added.

let data = {
  message: 'Hello World'
}

new Vue({
  el: '#application',
  data: data
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.6/vue.js"></script>
<div class="container">
  <div id="application">
    <input type="text" v-model="message">
    <p>The value of the input is: {{ message }}</p>
  </div>
</div>

Upvotes: 98

Views: 149018

Answers (20)

yakov
yakov

Reputation: 783

If you use Vue 2, the Vue DevTools that you used until today (30/10/24) no longer work.

Vue DevTools v7 detected your Vue 2 project.

v7 only supports Vue 3 and will not work.

The legacy version that supports both Vue 2 and Vue 3 has been moved to: https://chromewebstore.google.com/detail/vuejs-devtools/iaajmlceplecbljialhhkmedjlpdblhp

Install and enable only the legacy version of your Vue 2 app.

Upvotes: 0

epeleg
epeleg

Reputation: 10915

I am using Vue 3 with the latest chrome extension from the extensions market (Vue.js devtools 6.5.1)
I tried to follow the answer given by @toni19 here: https://stackoverflow.com/a/45379603/25412 but was unable because there was no "Vue" in my app. my app was created via the vue-cli create command.

I than added:

app.config.devtools = true;

right after the line that said:

const app = createApp(App)

in my main.js file.

and it worked for me.

Upvotes: 0

Przemysław Niemiec
Przemysław Niemiec

Reputation: 1714

I tried all of the ways presented in answers here, but none of them worked for me (neither for chrome nor for firefox).

Finally I found an answer: If you still have this problem, you can try to uninstall the current version of Vue extension and install beta version: https://v3-migration.vuejs.org/breaking-changes/introduction.html#devtools-extension

Remember to restart your browser afterwards.

Upvotes: 112

22nds
22nds

Reputation: 166

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://v2.vuejs.org/v2/api/#devtools

Upvotes: 11

David
David

Reputation: 924

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

Upvotes: 4

Cesar Castro
Cesar Castro

Reputation: 1970

One alternative is to set up a local web server, as the OP already stated.
The other - which IMHO is faster and less harassing - is letting the extension have access to file URLs, which is disabled by default.

Simply go to chrome://extensions and leave the "Allow access to file URLs" box checked for Vue.js devtools.

Sources:
https://github.com/vuejs/vue-devtools#common-problems-and-how-to-fix

Upvotes: 128

John
John

Reputation: 190

In my case I just had compiled for production npm run prod - which was the issue. As I ran in dev npm run dev, it started recognizing Vue.

Upvotes: 0

ekene
ekene

Reputation: 301

In the case of Firefox, install the beta version of vue-devtools, which supports Vue 3.

Upvotes: 2

marcdahan
marcdahan

Reputation: 3052

check if vuejs app is not embedded in an iframe such as in a storybook app.

the hack in such a case is to work outside the parent frame working directly on the url of your iframe and the vue enter image description heredevtools should work fine.

Upvotes: 1

Hashan Shalitha
Hashan Shalitha

Reputation: 875

UPDATE: 2021 May 30,

If you are using Vue 3, old dev tools versions won't work, so just use the new beta version.

https://chrome.google.com/webstore/detail/vuejs-devtools/ljjemllljcmogpfapbkkighbhhppjdbg

Upvotes: 46

techmsi
techmsi

Reputation: 443

I had the same issue & solved it by:

  1. Installing this extension Vue Dev Tools Beta Chrome Extention
  2. Reloading the chrome browser.

Upvotes: 3

David Morales
David Morales

Reputation: 18064

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.

Upvotes: 3

ShuYU
ShuYU

Reputation: 1

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

Upvotes: 0

SynergyChen
SynergyChen

Reputation: 1521

If you have already turned on Allow Access to file URLs in chrome://extensions/ -> Vue Devtools and it still does not work, try reinstall the Vue Devtools, might work for you.

Upvotes: 1

TrophyGeek
TrophyGeek

Reputation: 6099

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.

Upvotes: 0

monisha sampath
monisha sampath

Reputation: 31

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..

Upvotes: 3

genevralancer
genevralancer

Reputation: 21

I solved the same problem. But in my case Vue.js Chrome Devtools didn't detect Vue.js because in html file was <script src="https://unpkg.com/vue"/>

I replaced it to <script src="https://unpkg.com/vue"></script> Now Chrome Devtools is detecting Vue.js perfectly.

Thanks for exapmle above.I use [email protected] and open my html by file://

Upvotes: 2

oriolowonancy
oriolowonancy

Reputation: 293

To solve this, simply go to chrome://extensions/, scroll down to the Vue.js devtools and enable the "Allow Access to file URLs" by clicking on its checkbox.

Source: https://github.com/vuejs/vue-devtools/issues/236

Upvotes: 17

andylondon
andylondon

Reputation: 196

i had this problem, and i was expecting the vue-devtools to work by just including it. i had it console log the version

console.log("Vue Version " +Vue.version );

but this didnt work to actually load an instance of vue.

took me a few minutes, but once i actually created a vue instance, then it worked. this was the hello world example that made the devtools work :)

let data = {
  message: 'Hello World'
}

new Vue({
  el: '#application',
  data: data
})

Upvotes: 2

Simon Suh
Simon Suh

Reputation: 10882

I found out the answer, I was viewing a plain html file on my computer which was making the vue.js tool not load. I loaded up my local xampp server and ran the application from the local machine server url again and now vue.js devtools is working! :)

Upvotes: 8

Related Questions