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
You may use the dev version of vue.js. For example get it here: https://unpkg.com/vue@2.3.2
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! ;)
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:
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.
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)