Debugging nuxtjs .vue Files On the Server in Docker

vs code attach inspector when your nuxt app is already started.
To see whats happen in server side, vs code have to launch your nuxt app.
Add this script to your package.json:

...scripts: {   "dev": "nuxt,   "dev-debug": "node --inspect node_modules/.bin/nuxt",   ...}...

In .vscode config or .vscode/launch.json:

"configurations": [{    "type": "node",    "request": "launch",    "name": "Launch nuxt",    "runtimeExecutable": "npm",    "runtimeArgs": [        "run",        "dev-debug"    ],    "port": 9229},...

And finally, extend the build in nuxt.config.js to add source maps when we are running in development mode and ensure the correct type for both the client and server.

build: {    extend(config, ctx) {      if (ctx.isDev) {        config.devtool = ctx.isClient ? 'source-map' : 'inline-source-map'      }    }}

It's work for me on localhost, but I'm not sure it's working with remote root...

Also, it's not a perfect solution. I saw sometimes breakpoint jump from different line. I think this is because vs code cannot handle same lines in source and inline-source.

Alternative way:

To debug only javascript of a single file component (.vue), it's possible to extract the javascript part in an external .js file, and import it with <script src="./path-to-js"></script>.