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.

[cyberlightdev]

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

[ProgrammingPete]

For those of you who are using the CDN version of Vue.js. You can use the non-production package for debugging and the (production) packages for your production. See the screenshot below.

vue.js for debugging 'vue.min.js' for production

[awacode21]

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

ist this still valid for nuxt 3 ? I don't get it to show up

[AverageCakeSlice]

l'm also having this issue with a Vue 3 app of mine, but I'm not in production mode. I'm not sure what's going on and there doesn't seem to be any way to override the behavior.

[nth-chile]

Is devtools still a config option? Not seeing anything about it in the docs.

[semiaddict]

If using vue-cli with vue 3, you need to tap into the "feature-flags" plugin to change the value of __VUE_PROD_DEVTOOLS__ to true. See https://github.com/vuejs/core/tree/main/packages/vue#bundler-build-feature-flags.

Here's how I did it in vue.config.js:

module.exports = defineConfig({
  chainWebpack: (config) => {
    config.plugin("feature-flags").tap((args) => {
      args[0].__VUE_PROD_DEVTOOLS__ = true;
      return args;
    });
});

I believe this can also be done when not using the cli, but then I guess you'll have to define the plugin as done by the cli.

[nth-chile]

Unfortunately my project is not using the cli or webpack. Just a vue.dev.js file

[douglasg14b]

Is there afix for Vue3?

I'm using vite and during dev serve, the dev tools are unavailable because they claim it's a production build when it most definitely is not.

This used to work just fine, so some update broke things.

[0xdevalias]

this answer works for me

$vm = $0.__vue__

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

People looking to do this who can't just change their code and re-deploy may like these 2 blogs:

• https://www.damianmullins.com/inspecting-a-vue-application-in-production/
• https://www.damianmullins.com/logging-vuex-actions-and-mutations-in-the-wild/

Based on that, you could get a list of all of the Vue elements by running the following snippet in the JS console:

let vueElements = [...document.querySelectorAll('*')].filter(el => el.__vue__);

console.log(vueElements);

You can then access the Vue internals from element.__vue__ (eg. vueElements[0].__vue__)

---

Edit:

Using similar techniques to the above + looking closer at how Vue devtools works, we can use the following snippet in Chrome devtools to enable it even on a production page/when it has been explicitly disabled:

let firstVueElement = [...document.querySelectorAll('*')].find(el => el.__vue__);
let Vue = undefined;

if (firstVueElement) {
  Vue = Object.getPrototypeOf(firstVueElement.__vue__).constructor

  while (Vue.super) {
    Vue = Vue.super
  }
}

if (Vue) {
  console.log('Found Vue', { Vue });

  console.log('Vue.config', Vue.config);

  console.log('Setting Vue.config.devtools = true');
  Vue.config.devtools = true;

  console.log('Setting __VUE_DEVTOOLS_GLOBAL_HOOK__ values', { __VUE_DEVTOOLS_GLOBAL_HOOK__ });
  __VUE_DEVTOOLS_GLOBAL_HOOK__.Vue = Vue;
  __VUE_DEVTOOLS_GLOBAL_HOOK__.enabled = true;

  console.log('Signalling to Vue Devtools that it should enable itself');
  window.postMessage({
    devtoolsEnabled: true,
    vueDetected: true,
    nuxtDetected: false,
  }, '*')
} else {
  console.log('Failed to find Vue');
}

[tcrite1]

If using vue-cli with vue 3, you need to tap into the "feature-flags" plugin to change the value of __VUE_PROD_DEVTOOLS__ to true. See https://github.com/vuejs/core/tree/main/packages/vue#bundler-build-feature-flags.

Here's how I did it in vue.config.js:

module.exports = defineConfig({
  chainWebpack: (config) => {
    config.plugin("feature-flags").tap((args) => {
      args[0].__VUE_PROD_DEVTOOLS__ = true;
      return args;
    });
});

I believe this can also be done when not using the cli, but then I guess you'll have to define the plugin as done by the cli.

this fixed it form me!

[yasirhere123]

i went with this command in my console and also add in main js file it worked perfectly for me command = " Vue.config.devtools = true; "

example of js file below Vue.config.devtools = true;

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