VS Code launch.json to enable debugging of Nuxt.js apps. Note a further change is required in your nuxt.config.js

launch.json

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "client: chrome",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}",
      "sourceMapPathOverrides": {
        "webpack:///*": "${workspaceRoot}/*"
      }
    },
    {
      "type": "node",
      "request": "launch",
      "name": "server: nuxt",
      "args": ["dev"],
      "osx": {
        "program": "${workspaceFolder}/node_modules/.bin/nuxt"
      },
      "linux": {
        "program": "${workspaceFolder}/node_modules/.bin/nuxt"
      },
      "windows": {
        "program": "${workspaceFolder}/node_modules/nuxt/bin/nuxt.js"
      }
    }
  ],
  "compounds": [
    {
      "name": "fullstack: nuxt",
      "configurations": ["server: nuxt", "client: chrome"]
    }
  ]
}

I've figured it out, try to use this options:

nuxt.config.jd:

const isDev = process.env.NODE_ENV === 'development'
const config = { ...
build: {
babel: {
compact: !isDev ,
sourceRoot : __dirname
},
extend(config, { isClient }) {
// Extend only webpack config for client-bundle
if ( isDev) {
config.devtool = isClient ? 'source-map' : 'inline-source-map'
}
}
}

And the built-in debugger of vscode will start working. Hope it helps

const isDev = process.env.NODE_ENV === 'development'
const config = { ...
  build: {
    babel: {
      compact: !isDev ,
      sourceRoot : __dirname
    },
  extend(config, { isClient }) {
    // Extend only webpack config for client-bundle
    if ( isDev) {
      config.devtool = isClient ? 'source-map' : 'inline-source-map'
    }
  }
}

@aluferraz which part of this helped?

I've already extracted only the relevant part.. You must disable compact (on development env), specify the source root and build source maps (on development env)

This away you can use VSCode builtin debugger and debug async functions without a problem

const isDev = process.env.NODE_ENV === 'development'
const config = { ...
  build: {
    babel: {
      compact: !isDev ,
      sourceRoot : __dirname
    },
  extend(config, { isClient }) {
    // Extend only webpack config for client-bundle
    if ( isDev) {
      config.devtool = isClient ? 'source-map' : 'inline-source-map'
    }
  }
}

@aluferraz Thanks a lot for the information! It works also on the latest version! ❤️

hmm this config allow me only to debug the app.js file :( all breakpoints stop in the app.js

hmm this config allow me only to debug the app.js file :( all breakpoints stop in the app.js

Same issue here, have yet to get this to work.

From :
https://nuxt.com/docs/guide/going-further/debugging

{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "client: chrome",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}"
    },
    {
      "type": "node",
      "request": "launch",
      "name": "server: nuxt",
      "outputCapture": "std",
      "program": "${workspaceFolder}/node_modules/nuxi/bin/nuxi.mjs",
      "args": [
        "dev"
      ],
    }
  ],
  "compounds": [
    {
      "name": "fullstack: nuxt",
      "configurations": [
        "server: nuxt",
        "client: chrome"
      ]
    }
  ]
}