title: Debugging NativeScript-Vue when using vue-cli-template
body: <p>I'm trying to figure out the right way to debug apps written in NativeScript-Vue AND using the &quot;vue-cli-template&quot;.</p>
  <p>There are currently two templates supported:</p>
  <ol>
  <li>&quot;nativescript-vue-template&quot;</li>
  </ol>
  <hr />
  <p>This one is much simpler, and debugging it is easy. There is a <a href="https://stackoverflow.com/questions/32515336/how-debug-nativescript-code">useful answer </a>on that already. The debugging is done using chrome-devtools. This template doesn't use vue-cli/Webpack/Babel, so the &quot;Sources&quot; that you can view in Chrome are not changed in any way. You can easily set breakpoints there.
  Just run e.g.:</p>
  <pre><code>tns debug android
  </code></pre>
  <p>You can also use the very nice VS Code plugin.</p>
  <ol start="2">
  <li>&quot;vue-cli-template&quot;</li>
  </ol>
  <hr />
  <p>This one uses vue-cli/Webpack/Babel, so that the .vue Single File Components can be compiled in different ways.</p>
  <p><strong>Using a fresh install of the &quot;vue-cli-template&quot; as an example:</strong></p>
  <p>Run:</p>
  <pre><code>npm run debug:android
  </code></pre>
  <p>When you view the &quot;Sources&quot; of the &quot;Hello world&quot; demo app provided in the template, the app.js file has 17700 lines of code. It is basically the compiled dist/app/app.android.js file.</p>
  <p>I've got some experience with vue-cli based applications. In an application configured according to the <a href="https://v2.vuejs.org/v2/cookbook/debugging-in-vscode.html" rel="nofollow noreferrer">Vue documentation</a>, when you view the &quot;Sources&quot; in Chrome dev-tools, apart from the compiled sources you can access the &quot;webpack://&quot; node, which contains the original code. You can set breakpoints there and it works.</p>
  <p>Unfortunately the &quot;vue-cli-template&quot; does not work this way. There is no &quot;webpack://&quot; node available. You can only access the compiled sources.</p>
  <p>I tried to follow the mentioned <a href="https://v2.vuejs.org/v2/cookbook/debugging-in-vscode.html" rel="nofollow noreferrer">Vue documentation</a> to fix this. I'm supposed to add</p>
  <pre><code>module.exports = {
    configureWebpack: {
      devtool: 'source-map'
    }
  }
  </code></pre>
  <p>to the vue.config.js file.
  The template does not have it. Should I create one? If so, where?
  Maybe I need other Webpack configurations?</p>