Vue.js is detected on this page. Devtools inspecti

Question

I'm trying to enable vue-devtools in Google Chrome. But I cannot enable it. I'm using vue.js inside the Laravel application.

My server runs using php artisan serve command.

Answer 1

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)

Answer 2

1. If the page uses a production/minified build of Vue.js, devtools inspection 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 to check "Allow access to file URLs" for this extension in Chrome's extension management panel.
3. I had to restart the chrome, and it worked :-)

Answer 3

You may use the dev version of vue.js. For example get it here: https://unpkg.com/vue@2.3.2

Answer 4

Short Answer for Vue CLI 3.x
If you are using Vue CLI 3.x you can do this by simply adding this script to package.json

scripts: {
   "test": "vue-cli-service build --mode=development"
}

Explanation
This was because Vue.config.devtools are set to false by default in production mode as said by this GitHub Issue. But this has a work around, simply by using --mode=development flag provided in the documentation.

Then you can run using npm run test and check the file in your dist/ folder! ;)

Answer 5

When using Laravel just make sure you run the proper webpack for your environment for development . Running

npm run watch

should build Vue with debug mode on. Using

npm run production

minifies Vue for production. This will save you having to remember to toggle the debug mode when building for production.

Answer 6

make sure you're running a non-production build of Vue.js. https://github.com/vuejs/vue-devtools/issues/62