Vue-devtools: Vue.js not detected

[g-patel]

Setup

• Running the page at localhost:3070/* url, so http protocol, not file:// protocol.
• Using development version on my page as follows:
  <script src="https://unpkg.com/[email protected]/dist/vue.js" type="text/javascript"></script>

• Chrome extension setting:
  
• Chrome version: Version 55.0.2883.95 (64-bit) on macOS Sierra

In the console:

[g-patel]

Actually, I see it in the chrome dev tools pane, but I got confused by the fact that it says Vue.js not detected when I click on grey Vue icon in the "Chrome Menu".

[g-patel]

Closing this since I can debug using the dev tools pane.

[Haprog]

I also spent an hour or two trying to figure out why Vue Devtools toolbar button in the Chrome Menu always stays grey and says Vue.js not detected when clicked until I found this closed issue.

It looks like the Vue pane shows up in the dev tools anyway at least for localhost and the Vue guide/docs where Vue is loaded.

The issue still persists though and should be fixed, so that the button also states that Vue is detected (when it actually is), because otherwise it is very confusing to new users. So I suggest to reopen this issue.

For some reason though the Vue pane doesn't seem to show in JSFiddle with the Hello Vue example. Maybe this should be opened as another issue?

[posva]

or some reason though the Vue pane doesn't seem to show in JSFiddle with the Hello Vue example. Maybe this should be opened as another issue?

No, that's normal, it's on an iframe

If you can boil down the error and provide a repro using this template, feel free to open a new issue

[Akryum]

@Dorian https://github.com/vuejs/vue-devtools#commom-problems-and-how-to-fix

Fixing "Download the Vue Devtools for a better development experience" console message when working locally over file:// protocol: 1.1 - Google Chrome: Right click on vue-devtools icon and click "Manage Extensions" then search for vue-devtools on the extensions list. Check the "Allow access to file URLs" box.

[caglarorhan]

I experienced the same. Simply solve by adding js files (as vue.js ) at the end of the html codes. I think rendering order is going wrong somehow.

[steveross1975]

@Akryum Thank you mate! I solved the issue with your help!

[ByWaleed]

If your not using a server, then you might have a url with file://your_file_location.html. In chrome this can be fixed by right clicking on _Vue JS icon, -> Manager Extensions_ and under Vue JS Extension there will be option to _allow access to file URL_. Refresh your page and this should solve this problem (at least on chrome).

[phuongthuan]

@InnocentPuff I used server but it didn't work. I used laragon

[chendoly]

When i check the "Allow access to file URLs" box and open again the index.html with

<script src="https://unpkg.com/vue"></script>
<div id="app">
        <p>{{message}}</p>
    </div>
    <script>
        var app = new Vue({
            el:'#app',
            data:{
                message:'Hello Vue.js!'
            }
        })
    </script>

the Vue Devtools toolbar button is on

[dingb]

I came across this same issue, after I upgrade Chrome and restart Chrome, it works fine.

[thevruno]

I solved this problem with right click on the Vue icon, managing extension, click on 'Allow access to file URL'

F5 in your project and ready. Cheers.

[taoliujun]

@Dorian https://github.com/vuejs/vue-devtools#commom-problems-and-how-to-fix

Fixing "Download the Vue Devtools for a better development experience" console message when working locally over file:// protocol: 1.1 - Google Chrome: Right click on vue-devtools icon and click "Manage Extensions" then search for vue-devtools on the extensions list. Check the "Allow access to file URLs" box.

Not working after i done like this. Vue.js not detected happened when:

1. Url is http://127.0.0.1:8081
2. vue.js script url is https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js
3. console Vue.config.devtools was true

[tomhanlon]

Thanks @Akryum

[hungcg]

I came across this same issue and i resolved it following Akryum's comment, but I need to do that step:
https://github.com/vuejs/vue-devtools/issues/445#issuecomment-340376475

Close the devtools and reopen them
Vue devtools only appear when Vue is detected, that way you can drag it upfront and it will not bother you when developing non-vue apps