CODEWITHSUNDEEP
vue.jsvuejs2
Peter Krauss
Peter Krauss

Reputation: 13920

Chrome extension vue-devtools not detecting Vue

Not detected my <script src="https://cdn.jsdelivr.net/npm/vue"></script>

Also https://v2.vuejs.org/v2/examples/commits.html have <script src="/js/vue.js"></script> and when click Vue icon at Chorme say "Vue.js not detected"

PS: using extension described here and supposing the github.com/vuejs/vue-devtools.

EDIT: the installation say nothing, but you must to close and reopen Chorme.

Well, after it a new problem, now the on-click-VueIcon message is

Vue.js is detected on this page. Devtools inspection is not available because it's in production mode or explicitly disabled by the author.

Upvotes: 21

Views: 26442

Answers (7)

Peter Kerr
Peter Kerr

Reputation: 1739

If using Vue 3, you need the new version of the extension that is currently still in beta https://chrome.google.com/webstore/detail/vuejs-devtools/ljjemllljcmogpfapbkkighbhhppjdbg?hl=en

Upvotes: 12

Sky
Sky

Reputation: 57

When using the answer to samayo for beginners is not complete. It is important for confused people to know the code that is placed in some location.

The cause of leading to the problem is that you are using Vue.js from CDN. You should add the Vue.config.devtools = true; code snippet in your xxx.js file. For example:
example.js 
Vue.config.devtools = true;

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!',
  }
})
Reference:

https://github.com/vuejs/vue-devtools/issues/190

Upvotes: 3

P3trur0
P3trur0

Reputation: 3225

In order to make vue-devtools able to detect that you're running a Vue application, it is not enough to add the Vue library itself. Indeed, you have to create at least a Vue instance.

For example, the following is properly detected as Vue application.

<html>
  <head>
    <title>Hello there</title>

    <script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
  </head>

  <body>
    <div id="app"></div>
    <script type="text/javascript">
      // creating a root Vue instance here
      var vm = new Vue({el: '#app'});
    </script>
  </body>
</html>

Upvotes: 0

Aminu Kano
Aminu Kano

Reputation: 2855

I found this simple workaround:

  • right click the Vue icon and click Manage extensions
  • Scroll down and enable Allow access to file URLs
  • Restart your Chrome, and you'll be good.

NOTE: You might need to turn on debug mode by adding this line at the beginning of your script 

Vue.config.devtools = true;

Upvotes: 20

Cosimo Chellini
Cosimo Chellini

Reputation: 1730

you are seeing this error because you are using minified version of vue, which in addition to having a smaller size has some production ready settings including Vue.config.devtools = true, putting the non-minified version solve the problem

Upvotes: 0

Cosimo Chellini
Cosimo Chellini

Reputation: 1730

I think you're using the minified version of vue which by default has the Vue.config.devtools = false, IMHO you'd better use a non-nested cdn like https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.15/vue.js

Upvotes: 0

samayo
samayo

Reputation: 16495

According to your edit, the answer is to turn on debug mode for vue as:

import Vue from 'vue'
Vue.config.devtools = true

This will allow you to see/inspect using devtools. Just make to sure to turn it off during production

Upvotes: 2

Related Questions