add configuration to use vuejs sample with Docker Dev Environments feature (#253)

Signed-off-by: Guillaume Lours <guillaume.lours@docker.com>

vuejs/.docker/docker-compose.yaml

@@ -0,0 +1,9 @@
+services:
+  web:
+    build:
+      context: vuejs
+      target: dev-envs
+    ports:
+      - 8080:8080
+    volumes:
+      - /var/run/docker.sock:/var/run/docker.sock

vuejs/README.md

@@ -59,3 +59,11 @@ Stopping vuejs_web_1 ... done
 Removing vuejs_web_1 ... done
 Removing network vuejs_default
 ```
+
+## Use with Docker Development Environments
+
+You can use this sample with the Dev Environments feature of Docker Desktop.  
+To develop directly web service inside containers, you just need to use the https git url of the sample:  
+`https://github.com/docker/awesome-compose/tree/master/vuejs`
+
+![page](../dev-envs.png)

vuejs/compose.yaml

@@ -1,6 +1,8 @@
 services:
   web:
-    build: vuejs
+    build:
+      context: vuejs
+      target: development
     ports:
       - 8080:8080
     volumes:

vuejs/vuejs/Dockerfile

@@ -1,4 +1,5 @@
-FROM node:14.4.0-alpine
+# syntax=docker/dockerfile:1.4
+FROM --platform=$BUILDPLATFORM node:14.4.0-alpine AS development
 
 RUN mkdir /project
 WORKDIR /project
@@ -9,3 +10,18 @@ RUN yarn global add @vue/cli
 RUN yarn install
 ENV HOST=0.0.0.0
 CMD ["yarn", "run", "serve"]
+
+FROM development as dev-envs
+RUN <<EOF
+apk update
+apk add git
+EOF
+
+RUN <<EOF
+addgroup -S docker
+adduser -S --shell /bin/bash --ingroup docker vscode
+EOF
+# install Docker tools (cli, buildx, compose)
+COPY --from=gloursdocker/docker / /
+CMD ["yarn", "run", "serve"]
+