Setting up vue-cli in docker

To setup vue-cli in docker we need nodejs and vue-cli 3.

We are going to use docker-compose.yml to setup docker, paste following to your docker-compose.yml file

docker-compose.yml

version: "3.3"

services:
  vue-cli:
    container_name: vue-cli-container
    build:
      context: .
      dockerfile: Dockerfile
    volumes:
      - ./:/code
    working_dir: /code
    stdin_open: true
    tty: true
    ports:
      - "8080:8080"
    networks:
      - frontend

networks:
  frontend:

Paste following into Dockerfile

Dockerfile

FROM node:latest

# install simple http server for serving static content
RUN npm install -g @vue/cli

#RUN vue create pos

#RUN vue add @vue/pwa

# make the 'code' folder the current working directory
WORKDIR /code

# copy both 'package.json' and 'package-lock.json' (if available)
#COPY package*.json ./


# install project dependencies
#RUN npm install

# build app for production with minification
#RUN npm run build

EXPOSE 8080

Now we have docker files setup, lets build the docker images

 # docker-compose up --build

After docker is built login into docker container using container id and create your project and vue/pwa plugin.

Get container id from docker

# docker ps

Get your container ID and login to container

# docker exec -it ID bash

Create vue project as name pos

# vue create myproject

Go into myproject directory and add plugins

# cd myproject

Add vue pwa plugin

# vue add @vue/pwa

Run project in docker

# npm run serve --host=0.0.0.0

View in browser at http://localhost:8080 You can also pull up the vue ui to graphically manage the project.

# vue ui -H  0.0.0.0 -p 8080