title: Vue UI is not working through docker-compose
body: <p>I'm trying to get a docker ready VUE application setup and ready to go using the UI tool the vue framework supplies; (the command <code>vue ui</code> will start the UI which is then accessed via the web browser).</p>
  
  <p>I was able to get a project setup successfully but only by using the command line method using vue create app-name-here and going through the prompts.  Below is an image of it working that way.</p>
  
  <p><a href="https://i.stack.imgur.com/BSAuA.png" rel="noreferrer"><img src="https://i.stack.imgur.com/BSAuA.png" alt="vue default program working"></a></p>
  
  <p>I wanted to use the VueUI so I could follow along on some learning tutorials regarding this and to explore it's features but for some reason I can't seem to get it to work.</p>
  
  <p>As you can see in the images I uploaded below it says it's ready on port :8000 and the docker-compose file is indeed set to be open on the port 8000 and also confirmed via docker ps command as seen below.</p>
  
  <p><a href="https://i.stack.imgur.com/HPmCm.png" rel="noreferrer"><img src="https://i.stack.imgur.com/HPmCm.png" alt="vue ui supposedly working?"></a></p>
  
  <p><a href="https://i.stack.imgur.com/64nhj.png" rel="noreferrer"><img src="https://i.stack.imgur.com/64nhj.png" alt="docker proof of port open"></a></p>
  
  <p>I can also verify that port 8000 is not being used by another process on my main computer (<code>lsof -i tcp:8000</code>).  This command just shows that only docker is using it as it should.</p>
  
  <p><a href="https://i.stack.imgur.com/nd1B9.png" rel="noreferrer"><img src="https://i.stack.imgur.com/nd1B9.png" alt="proof not being used on same computer"></a></p>
  
  <p>As you can see I have done everything in my power to ensure the port is open but when I go to the web browser to see the UI all I see is it can't be found, which is strange because the default project works just fine.</p>
  
  <p><a href="https://i.stack.imgur.com/NyuHN.png" rel="noreferrer"><img src="https://i.stack.imgur.com/NyuHN.png" alt="clearly showing me going to same host just different port and vue ui not working"></a></p>
  
  <p><strong>How can I get the Vue UI to work through docker</strong> like this?</p>
  
  <p><strong>NOTE</strong></p>
  
  <p>I start the vue ui server after I run docker-compose by executing into the container like this.</p>
  
  <pre><code>docker exec -it front_end_node /bin/bash
  </code></pre>
  
  <p>from there I can simply run <code>vue ui</code>, which is what you see in the screenshots above.</p>
  
  <p><strong>Docker-Compose File</strong></p>
  
  <pre><code>version: "3.7"
  services:
      dblive:
          image: mysql:8.0
          volumes:
              - ./db_data_live:/var/lib/mysql
              - ./database_config/custom:/etc/mysql/conf.d
          restart: always
          environment:
              MYSQL_ROOT_PASSWORD: 123456
              MYSQL_DATABASE: live
              MYSQL_USER: someadmin
              MYSQL_PASSWORD: somepassword
              MYSQL_ROOT_HOST: '%'
      dbdev:
          image: mysql:8.0
          volumes:
              - ./db_data_dev:/var/lib/mysql
              - ./database_config/custom:/etc/mysql/conf.d
          restart: always
          environment:
              MYSQL_ROOT_PASSWORD: 123456
              MYSQL_DATABASE: dev
              MYSQL_USER: someadmin
              MYSQL_PASSWORD: 123456
              MYSQL_ROOT_HOST: '%'
      phpmyadmin:
          depends_on:
              - dblive
              - dbdev
          image: phpmyadmin/phpmyadmin:latest
          environment:
              PMA_ARBITRARY : 1
          restart: always
          volumes:
              - ./phpmyadmin/config.user.inc.php:/etc/phpmyadmin/config.user.inc.php
          ports:
              - "8081:80"
      front_end_node:
          image: "poolservice/callcenter:1.0"
          container_name: front_end_node
          depends_on:
              - dblive
              - dbdev
          user: "node"
          working_dir: /home/node/app
          environment:
            #- NODE_ENV=production
            - NODE_ENV=development
          volumes:
            - ./app/call-center:/home/node/app
          ports:
            #Standard HTTP Dev Port
            - "8080:8080"
            #Vue UI Port
            - "8000:8000"
            #SSH Port
            - "443:443"
            # Tail command prints outputs from a process (either all or specified amount)
            #-F allows realtime streaming output of the changing file which is how it keeps it running so docker does not quit!
            #tail -F command here
          command: "/bin/sh -c 'cd call-center &amp;&amp; npm run serve'"
  </code></pre>
  
  <p><strong>The Docker File</strong></p>
  
  <pre><code># Use base image node 12
  FROM node:12.9.1
  
  # Set working directory in the container
  WORKDIR /home/node/app
  
  # Install the loopback client so we have access to it's commands.
  RUN npm install -g @vue/cli
  
  # Expose port 3000,8080 and 8000
  EXPOSE 3000
  EXPOSE 8080
  EXPOSE 8000
  </code></pre>
  
  <p><strong>New Things Recently Tried</strong></p>
  
  <p>I got this to work on my normal host and noticed it was 8001 as the port, so I tried this port instead, still didn't work though.</p>
  
  <p>When I executed into the container I tried <code>vue ui --port 8001</code> to ensure it was on that port and still no luck even after ensuring it was open.</p>
  
  <p>I did notice that on my mac it <strong>tries to load the browser up</strong>.  In a docker container this is not possible.  It also tries to get access to the files, so I'm not sure if this has something to do with it not working or not.  I will be investigating further...</p>