title: Debugging nuxtjs .vue Files On the Server in Docker
body: <p>I currently have a nuxt app setup as a univeral app in which I'm hosting using Docker. I've got pretty much everything working, the debugger attaches and finds local variables just fine when walking through middleware and api calls, but when debugging the <code>asyncData</code> method in the <code>.vue</code> file I can't see any of the local variables and my breakpoint keeps moving to the <code>.catch</code> line: </p>
  
  <p><a href="https://i.stack.imgur.com/vCoi9.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vCoi9.png" alt="enter image description here"></a></p>
  
  <p>I also get a bunch of other random things in the current context, which in this case is "Module"?? </p>
  
  <p>I've added this line to my <code>nuxt.config.js</code> file as well to make sure it uses the correct source maps:</p>
  
  <pre><code>     /*
    ** Build configuration
    */
    build: {
      /*
      ** You can extend webpack config here
      */
      extend(config, ctx) {
        console.log(`IsClient: ${ctx.isClient}`);
        console.log(`isDev: ${ctx.isDev}`);
        if (ctx.isDev) { 
          config.devtool = ctx.isClient ? 'source-map' : 'inline-source-map'
        }
      }
    }
  </code></pre>
  
  <p>Also here is my <code>.vscode</code> config:</p>
  
  <pre><code>{
      // Use IntelliSense to learn about possible attributes.
      // Hover to view descriptions of existing attributes.
      // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
      "version": "0.2.0",
      "configurations": [
          {
              "name": "Docker: Attach to Node",
              "type": "node",
              "request": "attach",
              "remoteRoot": "/usr/share/nginx/app",
              "port": 9229,
              "address": "localhost",
              "localRoot": "${workspaceFolder}/app",
              "protocol": "inspector",
              "restart": true,
              "sourceMaps": true
          }
      ]
  }
  </code></pre>
  
  <p>Also, here is the command I use to start the container:</p>
  
  <pre><code> node --inspect=0.0.0.0:9229 \
              ./node_modules/.bin/nuxt \
              &amp; nginx -g "daemon off;" \
  </code></pre>
  
  <p>I've tried a lot of different things including using babel-register and starting it with babel-node since its transpiled, but none of those methods worked. </p>
  
  <p>Is there anything I'm missing here? Can we just not debug <code>.vue</code> files on the server when creating a universal app?</p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>I switched to Webstorm and for whatever reason the debugging works flawlessly. I guess that is the difference between using an IDE and a text editor. </p>