21

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.

Improve this question
5
  • this may be a silly question, but have you installed the extension? If so, what do you get when you click on the vue icon? Also, make sure to replace Commented Mar 9, 2018 at 14:57
  • Thanks @samayo, seems a kind of "first time bug", instalation need reboot (the but is to not say that need it), see my edit Commented Mar 9, 2018 at 15:52
  • 1
    This is still an issue. Using Vue in a Chrome extension, eg: chrome-extension://<hash>/app.html, results in Vue.config.devtools being true, but devetools is undefined, resulting in this message on every reload: ``` Download the Vue Devtools extension for a better development experience: github.com/vuejs/vue-devtools ``` The Vue devtools button is grayed ut, and says "Vue.js not detected" when clicking it. Reloading Chrome has no effect. And I'm creating a Vue instance. Commented Mar 24, 2018 at 12:14
  • Other bug? Is detecting Vue on pages like this, where no Vue exists. Commented Mar 26, 2018 at 16:53
  • It just doesn't play nice on Chrome, I'll be using Firefox henceforth :( Commented Mar 16, 2019 at 6:52

7 Answers 7

Reset to default
20

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;
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

12

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

Improve this answer

1 Comment

This was the issue for me since I am using the vue 3 CDN. I wish the plugins for V2 vs V3 were distinguishable lol but I guess that doesn't matter too much. Thank you @Peter Kerr
3
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

Improve this answer

4 Comments

Hi Sky, you can't repeat other answers: before to post your answer, check if it is new or not. The basic information, "Vue.config.devtools = true", is not new in this page.
Thanks for sharing your idea. I have met the same problem in the past. Actually, the above answers have not been pointed out directly where the code should be placed, the Vue.config.devtools = true; code snippet is not important in this answer. In my opinion, it is significant for the confused people to explain the cause of problems, neat solutions, and relative reference links.
Ok, to avoid down-voting, edit your answer to say (to be explicit there not here as comment) what you thing is a difference. Important also citate the most similar answer, e.g. "... when using CDN the answer of @samayo is not complete, you need to ...".
Thank you for your time. You not only help me a lot in dealing with the question, and also enhance a deeper understanding of the problem for me. Let's develop a better wonderful communication community.
2

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

Improve this answer

1 Comment

Hi thanks for all. I will try this code as first lines in the script ... But see process to "solution" (sorry changed the problem after boot) in the @P3trur0 answer comments
0

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

Improve this answer

Comments

0

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

Improve this answer

Comments

0

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>
Improve this answer

7 Comments

Hum... My page was a complete Vue application, and see my link to vuejs.org/v2/examples/commits.html that is other example of web page with a complete application. Well I will reboot and try again.
Now changed! To "Vue.js is detected on this page. Devtools inspection is not available because it's in production mode or explicitly disabled by the author."
If your using CDN, make sure you're not using a minified build of the library (i.e.: production). For example, try with this: unpkg.com/[email protected]/dist/vue.js
(is UBUNTU F12 or inspec) yes! Now I see as option in the inspec the last option after network. Thanks!
This is still an issue. Using Vue in a Chrome extension, eg: chrome-extension://<hash>/app.html, results in Vue.config.devtools being true, but devetools is undefined, resulting in this message on every reload: ``` Download the Vue Devtools extension for a better development experience: github.com/vuejs/vue-devtools ``` The Vue devtools button is grayed ut, and says "Vue.js not detected" when clicking it. Reloading Chrome has no effect. And I'm creating a Vue instance.
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.