Dockerize Vue.js: hot-reload is not working for vue/[email protected] or later versions

Question

I greatly appreciate your effort and the time to solve unresponsive hot-reload function when trying to run Vue.js app on Docker container using Docker engine on Windows 10 while WSL2 active, please take a look at below configurations:

Vue.Setup.Dockerfile

FROM node:17-alpine
EXPOSE 8080
WORKDIR /app/frontend
RUN npm --force install -g @vue/[email protected]
COPY /frontend /app/frontend
ENV PATH /app/frontend/node_modules/.bin:$PATH
CMD [ "npm", "run", "serve" ]

docker-compose.yml

version: "3.8"
services:
    vue:
      build:
        context: .
        dockerfile: dockerfiles/Vue.Setup.Dockerfile
      restart: always
      ports:
        - "127.0.0.1:8080:8080"
      container_name: vue_ui
      volumes:
        - ./frontend/:/app/frontend/
        - /app/frontend/node_modules
      environment:
        - CHOKIDAR_USEPOLLING=true

vue.config.js

module.exports = {
      publicPath:
          process.env.NODE_ENV === "production"
              ? "/static/dist/"
              : "http://127.0.0.1:8080",
      pages: {
          index: {
              entry: 'src/main.js',
              template: 'public/index.html',
              filename: 'index.html',
              title: 'QuestionTime',
              chunks: ['chunk-vendors', 'chunk-common', 'index']
          },
      },
      // Webpack configuration
      devServer: {
          host: "0.0.0.0",
          port: "8080",
          hot: true,
          headers: {"Access-Control-Allow-Origin": "*"},
          devMiddleware: {
              publicPath: "http://127.0.0.1:8080",
              writeToDisk: (filePath) => filePath.endsWith("index.html"),
          },
          static: {
              watch: {
                  ignored: "/node_modules/",
                  usePolling: true,
              },
  
          },
          client: {
            webSocketURL: {
                /* You need to config this option, otherwise the below error will occur 
                   in your browser console when trying to connect to development server
                   from another Docker container:
                   WebSocket connection to 'ws://127.0.0.1:<port-number>/ws' failed
                */
                hostname: "0.0.0.0",
                pathname: "/ws",
                port: 8080,
            },
        },
      },
};

Note: When run the command:

docker-compose up

The below message will show:

It seems you are running Vue CLI inside a container.

Since you are using a non-root publicPath, the hot-reload socket
will not be able to infer the correct URL to connect. You should
explicitly specify the URL via devServer.public.

Access the dev server via http://localhost:<your container's external mapped port>

FYI: the option:

devServer.public

is no longer available in Vue/cli@4 or later versions.

WORKAROUND solution

Thanks,