How to config Laravel Mix Vue.js source map to show real component code in debug mode

I use Laravel 5.4 with Vue.js 2.6. I have problem to see sourceMap of *.vue component file in console. I configure Laravel mix with this script:

let mix = require('laravel-mix');

mix.webpackConfig({
    devtool: 'eval-source-map'
});

mix.js([
        'resources/assets/js/app.js'
    ], 'public/js')
    .sourceMaps()
    .version();

For example I have vue component like this:

<template>
    <div class="Example" @click="add()">
        {{ name }}
    </div>
</template>

<script>
    export default {
        data(){
            return {
                name: 'John'
            }
        },
        methods:{
            add(){
                console.log('example click')
            }
        }
    };
</script>

but when Laravel mix compile it, I see like this in source tab of chrome:

var render = function() {
  var _vm = this
  var _h = _vm.$createElement
  var _c = _vm._self._c || _h
  return _c(
    "div",
    {
      staticClass: "Example",
      on: {
        click: function($event) {
          return _vm.add()
        }
      }
    },
    [_vm._v("\n    " + _vm._s(_vm.name) + "\n")]
  )
}
var staticRenderFns = []
render._withStripped = true
module.exports = { render: render, staticRenderFns: staticRenderFns }
if (module.hot) {
  module.hot.accept()
  if (module.hot.data) {
    require("vue-hot-reload-api")      .rerender("data-v-650f2efa", module.exports)
  }
}


//////////////////
// WEBPACK FOOTER
// ./node_modules/vue-loader/lib/template-compiler?{"id":"data-v-650f2efa","hasScoped":false,"buble":{"transforms":{}}}!./node_modules/vue-loader/lib/selector.js?type=template&index=0!./resources/assets/js/components/Example.vue
// module id = ./node_modules/vue-loader/lib/template-compiler/index.js?{"id":"data-v-650f2efa","hasScoped":false,"buble":{"transforms":{}}}!./node_modules/vue-loader/lib/selector.js?type=template&index=0!./resources/assets/js/components/Example.vue
// module chunks = 0

What should I do to see real and pure Example vue.js component in source tab?

Recommended topics

Hot tags