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

I was seeing the error message in this question's title and this solution worked for me:

Add Vue.config.devtools = true to the file where you create the Vue instance (main.js for me).

Note that, as mentioned in this answer, you need to put the Vue.config.devtools = true line before you create your store in order for the Vuex part of the devtools to work. If you're creating your Vuex store in a separate file (e.g. store.js), you may need to have the Vue.config.devtools = true line in both your main.js file as well as the store.js file.

Below is what the changes looked like in my project:

1. If the page uses a production/minified build of Vue.js, devtoolsinspection is disabled by default so the Vue pane won't show up.
2. To make it work for pages opened via file:// protocol, you need tocheck "Allow access to file URLs" for this extension in Chrome'sextension management panel.
3. I had to restart the chrome, and it worked :-)

If your using CDN; make sure your not using a production (minified) build of the library.

Use: https://unpkg.com/vue@2.4.4/dist/vue.js

Instead of: https://unpkg.com/vue@2.4.4/dist/vue.min.js

You might need to do Ctrl+Alt+I for it to show up the first time. (Source)