My current setup includes Laravel 5.4 and Vue.js 2.6. I'm facing an issue with viewing the sourceMap of *.vue component files in the console. Here is how I've configured Laravel mix:
let mix = require('laravel-mix');
mix.webpackConfig({
devtool: 'eval-source-map'
});
mix.js([
'resources/assets/js/app.js'
], 'public/js')
.sourceMaps()
.version();
For instance, consider this vue component snippet:
<template>
<div class="Example" @click="add()">
{{ name }}
</div>
</template>
<script>
export default {
data(){
return {
name: 'John'
}
},
methods:{
add(){
console.log('example click')
}
}
};
</script>
However, after Laravel mix compiles it, I see something like this in the 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")]
)
}
// more lines of code...
How can I view the real and pure Example vue.js component in the source tab?