I’ve run into this exact issue before when working with Nuxt’s dev mode behind Nginx Proxy Manager—let’s break down why it’s happening and how to fix it.

First, yes, this error is directly tied to using npm run dev for Nuxt. Nuxt’s development server uses Server-Sent Events (SSE) via the /_loading/sse endpoint to push real-time updates (like hot reload status, build progress, etc.) to the browser. The problem comes from Nginx Proxy Manager’s default configuration, which isn’t optimized for long-lived SSE connections.

Here are the most effective fixes, ordered by priority: #

1. Adjust Nginx Proxy Manager’s Reverse Proxy Configuration (Best Fix) #

Nginx’s default timeout settings will kill the SSE connection after 30-60 seconds, triggering the HTTP/2 protocol error. To fix this, add custom Nginx rules to your proxy host:

1. Open Nginx Proxy Manager and navigate to your dev.domain.de proxy host.
2. Switch to the Custom Configuration tab.
3. Paste the following configuration snippet:

# Optimize for SSE long connections
proxy_set_header Connection '';
proxy_http_version 1.1;
chunked_transfer_encoding off;
proxy_buffering off;
proxy_cache off;
# Extend timeouts to prevent premature connection closure
proxy_read_timeout 86400;
proxy_send_timeout 86400;

These settings disable buffering/caching (which breaks SSE) and extend the read/write timeouts to 24 hours, ensuring the SSE connection stays alive during development.

2. Switch Nuxt Dev Mode to WebSocket for HMR (Workaround) #

If you want to avoid modifying Nginx config temporarily, you can force Nuxt’s Hot Module Replacement (HMR) to use WebSockets instead of SSE. Update your nuxt.config.js:

export default {
  // Disable devtools SSE if not needed
  devtools: { enabled: false },
  vite: {
    server: {
      hmr: {
        protocol: 'ws',
        clientPort: 45230 // Match your exposed container port
      }
    }
  }
}

This bypasses the SSE endpoint entirely, eliminating the source of the error.

3. Optimize Docker Network Configuration #

Ensure your Nuxt container and Nginx Proxy Manager are on the same Docker network for more stable connections:

Update your Docker Compose file to include a shared network:

services:
  app:
    container_name: app
    command: npm run dev
    build:
      context: ./frontend
      dockerfile: Dockerfile
    ports:
      - '45230:45230'
    volumes:
      - ./frontend:/app
      - ./frontend/node_modules:/app/node_modules/
    networks:
      - nuxt-proxy-network

networks:
  nuxt-proxy-network:
    # Use external: true if you already created this network manually,
    # or omit it to let Docker Compose create it automatically
    external: false

Then, in Nginx Proxy Manager, set your proxy target to http://app:45230 (using the container name instead of your host IP) for better network reliability.

Why This Happens #

Nuxt’s dev server uses SSE to maintain a persistent connection with the browser for real-time updates. Nginx’s default proxy_read_timeout is usually 60 seconds, so when it closes this long-lived connection, Chrome throws the HTTP/2 protocol error because the connection was terminated unexpectedly.

内容的提问来源于stack exchange，提问作者Vx0