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

[akshayrpatel]

Does anyone know why am I having this issue ?

[simplesmiler]

You are probably using Vue from CDN, and probably using a production build (dist/vue.min.js). Either replace it with a dev build (dist/vue.js) or add Vue.config.devtools = true to the main js file.

[blake-newman]

This issue will now be closed, please reopen when relevant information is provided.

Thanks.

[davidmoshal]

Still getting this error with Vue.config.devtools = true

[nikklass]

where do we put this directive? I placed the command "Vue.config.devtools = true" in the file app.js in laravel but it stil shows the same message. As below:

...
Vue.config.devtools = true

Vue.component('new-artist', require('./components/NewArtist.vue'));

const app = new Vue({
el: '#app'
});
...

[davidmoshal]

I've found that the directive has to go before any other references to Vue.
so, if the app.js file is your entry point, put it at the very top of the file.

[mknooihuisen]

@nikklass When using Laravel just make sure you run the proper webpack for your environment. running 'npm run watch' should build Vue with debug mode on. Use 'npm run production' to use minified Vue for production. This will save you having to remember to toggle the debug mode when building for production.

[Byronsargeant]

new Vue({
el: '#app',
data: {
message: 'hello world'
}
});
Vue.config.devtools = true;

This seems to have solved this issue for me in laravel 5.4

[vinodjoshi]

Does anyone found solution for this ?

[Ding-Fan]

@vinodjoshi #62 check out this
As my situation, I change my CDN to a non-minified version and have Vue.config.devtools = true in my js file, then it shows up.

[scasic]

In laravel 5.6 I solved this by
php artisan preset vue

[appsparkler]

Set the following before any references to Vue:

Vue.config.devtools = true

then also close and repopen the browser or developer console

Good Luck...

[judge2020]

Quick question, why is devtools disabled in production in Vue? Unless Vue exposes some extra debug information not present in production, it could work similar to React's devtools extension where only true debug information and full names of components are unavailable.

I just hope this isn't a "political" decision chosen because some companies or developers want to prevent users, other developers, from snooping around how their components work.

[catskull]

My argument is that all other devtools are available in production (network tab, js console, etc), so why not go all in? What harm can it do?

[LinusBorg]

@judge devtools hook into your application, so they can both impact performance and behaviour (i.e. through a bug in the devtools). Disabling them makes the app safer in that regard, and we don't want to force developers accept that risk for their production code.

And as you say, the devtools also make snooping around in an application much easier, and I think the decision about wether to allow that is up to the owner of the code, now us.

So we have them deactivated by default and make enabling them an opt-in for the developer.

Of course frontend code is never "secure", and anyone can snoop around if they want to, and activate the devtools by "force" if they are able and inclined to do so, but that doesn't mean that it's prudent to open up your app's inner workings to anyone able to install a browser extension. Some safguards are better than none.

[mgrollins]

There is also an option in the extension that will allow Vue devtools to"Allow access to file URLs" if running locally.

[Wolverine7]

I place the Vue.config.devtools = true; right above my Vue instance and it worked
Example:

Vue.config.devtools = true;
new Vue({
    el: '#app',

[Qwertie-]

@LinusBorg Shouldn't users have the right to see what is running on their own machine? The dev tools let the user more easily see what is happening with their data and what things are being collected. The react dev tools work on production mode and there seems to be no issues there.

[akimlyubchenko]

Hope it'll help someone.
I'm using webpack as bundle collector and vue dev tool did not work because publicPath contained a '.' line path

output: {
        path: path.resolve(__dirname, './dir/bundles/'),
        publicPath: '/dir/bundles/',
        filename: '[name].js'
    }

[shirshak55]

What is advantage of disabling vue dev tools by default? I don't think there is any performance penalty using react right so that should be same case for vue also? I can also freely browse facebook in react devtools. I guess people are happy with false illusion of security.

[dassio]

this answer works for me

$vm = $0.__vue__

edit: you need to select the dom in the inspect tab to get the $0

[shirshak55]

@dassio no this doesn't help. The question is about how to enable vue dev just like react devtool in production mode. Facebook and million of other react sites etc aren't having any security issue however vue core dev thinks disabling makes it hard. It makes hard for newbie but not for pro developer which might even be more risk tbh.

[dassio]

@dassio no this doesn't help. The question is about how to enable vue dev just like react devtool in production mode. Facebook and million of other react sites etc aren't having any security issue however vue core dev thinks disabling makes it hard. It makes hard for newbie but not for pro developer which might even be more risk tbh.

i agree , this is more like a hack and i put it here till vue core resolve this issue

[Romerolweb]

Still getting this error with Vue.config.devtools = true

WHere?

[shirshak55]

@Romerolweb u can do it in entry of application. Like usually it is index.js . Use it before you initialize vue components.

[mjzarrin]

If you are using Nuxt.js, add the following inside your nuxt.config.js

vue: {
    config: {
      devtools: true,
      productionTip: false,
    },
  },

[adamkhan]

In case you missed it, there are checkbox settings within DevTools itself to hide or display "Developer Tools installed by add-ons". Checking these solved it for me.