DevTools in vue.js

Question

I am using vue.js inside Laravel 5.5.33 (not SPA). I am getting below error.

How can I enable DevTools?

Answer 1

This is an old issue when production grade build is used.

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.

Check out the github link.

Answer 2

But, for me, the problem with DevTools was solved just when I put the line that is provided in the answer below after creating your Vue application.

Your code should look like this

new Vue({
 el: '#app',
 data () {
   text: 'testData'
 }
})

Vue.config.devtools = true

Answer 3

Be sure you have this setting in your app.js file

Vue.config.devtools = true

If you are using mix, check the dist of vue in webpack.mix, be sure you don't use min version

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css')
    .webpackConfig({
        resolve: {
            alias: {
                'vue$': 'vue/dist/vue.js'
            }
        }
    });

Run your npm in dev

npm run watch

WARNING If you refresh your page in your browser, the cache is not refreshed. Clean the cache to reload the app.js