It works!

.babelrc

@@ -0,0 +1,12 @@
+{
+  "presets": ["env"],
+  "plugins": [
+    [
+      "transform-runtime",
+      {
+        "polyfill": false,
+        "regenerator": true
+      }
+    ]
+  ]
+}

assets/App.vue

@@ -0,0 +1,17 @@
+<template lang="html">
+  <div>
+    <p>
+      <router-link to="/">Go back</router-link>      
+    </p>
+    <router-view></router-view>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "App"
+};
+</script>
+
+<style lang="css">
+</style>

assets/components/App.vue

@@ -1,31 +0,0 @@
-<template lang="html">
-  <div id="app">
-    <h1>Hello Parcel from Vue 📦 🚀</h1>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "app"
-};
-</script>
-
-<style lang="css">
-html,
-body {
-  height: 100%;
-}
-body {
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial,
-    sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-}
-#app {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 100%;
-}
-h1 {
-  font-weight: 300;
-}
-</style>

assets/index.html

@@ -9,5 +9,4 @@
   <div id="app"></div>
   <script src="/main.js"></script>
 </body>
-
 </html>

assets/main.js

@@ -1,7 +1,27 @@
 import Vue from "vue";
-import App from "/components/App.vue";
+import VueRouter from "vue-router";
+Vue.use(VueRouter);
+
+import App from "./App.vue";
+import Index from "./pages/Index.vue";
+import Container from "./pages/Container.vue";
+
+const routes = [
+  { path: "/", component: Index },
+  {
+    path: "/container/:id",
+    component: Container,
+    name: "container",
+    props: true
+  }
+];
+
+const router = new VueRouter({
+  mode: "history",
+  routes
+});
 
 new Vue({
-  el: "#app",
+  router,
   render: h => h(App)
-});
+}).$mount("#app");

assets/pages/Container.vue

@@ -0,0 +1,34 @@
+<template lang="html">
+  <ul ref="logs">
+    
+  </ul>
+</template>
+
+<script>
+let ws;
+export default {
+  props: ["id"],
+  name: "Container",
+  mounted() {
+    ws = new WebSocket(`ws://${window.location.host}/api/logs?id=${this.id}`);
+    ws.onopen = e => console.log("Connection opened.");
+    ws.onclose = e => console.log("Connection closed.");
+    ws.onerror = e => console.error("Connection error: " + e.data);
+    ws.onmessage = e => {
+      const parent = this.$refs.logs;
+      const item = document.createElement("li");
+      item.innerHTML = e.data;
+      parent.appendChild(item);
+    };
+  }
+};
+</script>
+<style>
+ul {
+  padding: 0;
+  margin: 0;
+}
+ul li {
+  list-style-type: none;
+}
+</style>

assets/pages/Index.vue

@@ -0,0 +1,26 @@
+<template lang="html">
+  <div>
+    <ul>
+      <li v-for="item in containers">        
+        <router-link :to="{name: 'container', params: {id: item.Id}}">{{ item.Names[0] }} {{ item.Status}}</router-link>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Index",
+  data() {
+    return {
+      containers: []
+    };
+  },
+  async created() {
+    this.containers = await (await fetch(`/api/containers.json`)).json();
+  }
+};
+</script>
+
+<style lang="css">
+</style>

main.go

@@ -2,6 +2,7 @@ package main
 
 import (
 	"context"
+	"encoding/binary"
 	"encoding/json"
 	"flag"
 	"log"
@@ -10,13 +11,14 @@ import (
 	"github.com/docker/docker/api/types"
 	"github.com/docker/docker/client"
 	"github.com/gobuffalo/packr"
+	"github.com/gorilla/websocket"
 )
 
-var addr = flag.String("addr", "localhost:8080", "http service address")
-
 var (
-	box = packr.NewBox("./templates")
+	box      = packr.NewBox("./templates")
-	cli *client.Client
+	cli      *client.Client
+	addr     = flag.String("addr", "localhost:8080", "http service address")
+	upgrader = websocket.Upgrader{}
 )
 
 func init() {
@@ -25,18 +27,24 @@ func init() {
 	if err != nil {
 		log.Fatal(err)
 	}
+	flag.Parse()
 }
 
 func main() {
-	flag.Parse()
-	// http.HandleFunc("/echo", echo)
 	box := packr.NewBox("./dist")
-	http.Handle("/", http.FileServer(box))
+	http.HandleFunc("/api/containers.json", listContainers)
-
+	http.HandleFunc("/api/logs", logs)
-	http.HandleFunc("/contains.json", listContainers)
+	http.Handle("/", http.HandlerFunc(func(w http.ResponseWriter, req *http.Request) {
+		fileServer := http.FileServer(box)
+		if box.Has(req.URL.Path) {
+			fileServer.ServeHTTP(w, req)
+		} else {
+			bytes, _ := box.Find("index.html")
+			w.Write(bytes)
+		}
+	}))
 
 	log.Fatal(http.ListenAndServe(*addr, nil))
-
 }
 
 func listContainers(w http.ResponseWriter, r *http.Request) {
@@ -46,3 +54,40 @@ func listContainers(w http.ResponseWriter, r *http.Request) {
 	}
 	json.NewEncoder(w).Encode(containers)
 }
+
+func logs(w http.ResponseWriter, r *http.Request) {
+	id := r.URL.Query().Get("id")
+	c, err := upgrader.Upgrade(w, r, nil)
+	if err != nil {
+		log.Fatal(err)
+		return
+	}
+	defer c.Close()
+
+	options := types.ContainerLogsOptions{ShowStdout: true, ShowStderr: true, Follow: true, Tail: "40"}
+	reader, err := cli.ContainerLogs(context.Background(), id, options)
+	defer reader.Close()
+	if err != nil {
+		log.Fatal(err)
+	}
+
+	hdr := make([]byte, 8)
+	content := make([]byte, 1024, 1024*1024)
+	for {
+		_, err := reader.Read(hdr)
+		if err != nil {
+			panic(err)
+		}
+		count := binary.BigEndian.Uint32(hdr[4:])
+		n, err := reader.Read(content[:count])
+		if err != nil {
+			log.Println(err)
+			break
+		}
+		err = c.WriteMessage(websocket.TextMessage, content[:n])
+		if err != nil {
+			log.Println(err)
+			break
+		}
+	}
+}

package.json

@@ -4,7 +4,8 @@
   "description": "",
   "main": "index.js",
   "scripts": {
-    "start": "parcel watch assets/index.html"
+    "start": "concurrently 'go run main.go' 'npm run watch-assets'",
+    "watch-assets": "parcel watch assets/index.html"
   },
   "repository": {
     "type": "git",
@@ -18,12 +19,20 @@
   "homepage": "https://github.com/amir20/dozzle#readme",
   "dependencies": {
     "vue": "^2.5.17",
-    "vue-hot-reload-api": "^2.3.1"
+    "vue-router": "^3.0.1"
   },
   "devDependencies": {
     "@vue/component-compiler-utils": "^2.3.0",
+    "babel-core": "^6.26.3",
+    "babel-plugin-transform-runtime": "^6.23.0",
     "babel-preset-env": "^1.7.0",
+    "babel-runtime": "^6.26.0",
     "parcel-bundler": "^1.10.3",
+    "concurrently": "^4.0.1",
+    "vue-hot-reload-api": "^2.3.1",
     "vue-template-compiler": "^2.5.17"
-  }
+  },
+  "browserslist": [
+    ">5%"
+  ]
 }