diff --git a/src/vue-poc/components/mimetypes.js b/src/vue-poc/components/mimetypes.js
new file mode 100644
index 0000000..408fc57
--- /dev/null
+++ b/src/vue-poc/components/mimetypes.js
@@ -0,0 +1,31 @@
+// Mimetype info
+const MimeTypes={
+ toMode:[
+            {name: "text/plain", mode: "text"},
+            {name: "text/xml", mode: "xml"},
+            {name: "application/xml", mode:"xml"},
+            {name: "application/xquery", mode:"xquery"},
+            {name: "text/ecmascript", mode:"javascript"},
+            {name: "application/sparql-query", mode:"sparql"},
+            {name: "text/html", mode:"html"},
+            {name: "text/turtle", mode:"turtle"},
+            {name: "text/css", mode:"css"},
+            {name: "image/svg+xml", mode:"svg"}
+            ],
+  mode:{
+    "text": {},
+    "javascript": {
+      format(t){ return js_beautify(t, { indent_size: 2 })}
+    },
+    "xml": {
+      format(t){ return html_beautify(t, { indent_size: 3 ,indent_inner_html:true})}
+    },
+    "css": {}
+  },
+  install(Vue){
+      Object.defineProperty(Vue.prototype, '$MimeTypes', {
+        get () { return MimeTypes }
+    })  }
+
+};
+Vue.use(MimeTypes);
\ No newline at end of file
diff --git a/src/vue-poc/core.js b/src/vue-poc/core.js
index 9ba6335..e59ae31 100644
--- a/src/vue-poc/core.js
+++ b/src/vue-poc/core.js
@@ -81,19 +81,6 @@ const Notification={
 };
 Vue.use(Notification);
 
-// Mimetype info
-const MimeTypes=[
-            {name: "text/plain", mode: "text"},
-            {name: "text/xml", mode: "xml"},
-            {name: "application/xml", mode:"xml"},
-            {name: "application/xquery", mode:"xquery"},
-            {name: "text/ecmascript", mode:"javascript"},
-            {name: "application/sparql-query", mode:"sparql"},
-            {name: "text/html", mode:"html"},
-            {name: "text/turtle", mode:"turtle"},
-            {name: "text/css", mode:"css"},
-            {name: "image/svg+xml", mode:"svg"}
-];
 
 // Settings read and write list clear
 localforage.config({
diff --git a/src/vue-poc/features/edit/edit.vue b/src/vue-poc/features/edit/edit.vue
index 12470a2..76d0041 100644
--- a/src/vue-poc/features/edit/edit.vue
+++ b/src/vue-poc/features/edit/edit.vue
@@ -35,7 +35,7 @@
   <v-menu left  transition="v-fade-transition" >
       <v-chip label small slot="activator" >{{ mode }}</v-chip>
           <v-list dense>
-              <v-list-tile v-for="type in mimeTypes"  :key="type.name">
+              <v-list-tile v-for="type in $MimeTypes.toMode"  :key="type.name">
                 <v-list-tile-title v-text="type.name" @click="setMode(type)"></v-list-tile-title>
               </v-list-tile>           
           </v-list>         
@@ -166,8 +166,7 @@ v-on:annotation="annotation"></vue-ace>
       message: "Cant do that",
       events:  new Vue({}),
       folded: false, // toggle fold/unfold action
-      aceSettings: { },
-      mimeTypes:MimeTypes
+      aceSettings: { }
     }
   },
   methods: {
diff --git a/src/vue-poc/features/edit/tabs.vue b/src/vue-poc/features/edit/tabs.vue
index 2714d7f..80a1d9a 100644
--- a/src/vue-poc/features/edit/tabs.vue
+++ b/src/vue-poc/features/edit/tabs.vue
@@ -11,17 +11,17 @@
        <v-menu v-if="active"  left  transition="v-fade-transition" >
        <v-chip label small slot="activator" >{{ active.mode }}</v-chip>
           <v-list dense>
-              <v-list-tile v-for="type in mimeTypes"  :key="type.name">
-                <v-list-tile-title v-text="type.name" @click="mimetype(type)"></v-list-tile-title>
-              </v-list-tile>           
+                <v-list-tile v-for="type in $MimeTypes.toMode"  :key="type.name">
+                <v-list-tile-title v-text="type.name" @click="setMode(type)"></v-list-tile-title>
+              </v-list-tile>         
           </v-list>         
       </v-menu>
       
        <v-menu v-if="active" left  transition="v-fade-transition" >
         <v-btn icon  slot="activator" ><v-icon>lightbulb_outline</v-icon></v-btn>
           <v-list dense>
-              <v-list-tile v-for="type in mimeTypes"  :key="type.name">
-                <v-list-tile-title v-text="type.name" @click="lightbulb(type.name)"></v-list-tile-title>
+                <v-list-tile v-for="type in $MimeTypes.toMode"  :key="type.name">
+                <v-list-tile-title v-text="type.name" @click="setMode(type)"></v-list-tile-title>
               </v-list-tile>           
           </v-list>         
       </v-menu>
@@ -125,8 +125,7 @@
         active: null,
         items: [],
       wrap: true,
-      aceSettings: {},
-      mimeTypes: MimeTypes
+      aceSettings: {}
       }
   },
   
@@ -149,11 +148,10 @@
     },
     
     openUri(){
-      console.log("mimetypes: ",this.mimeTypes);
       alert("openUri TODO")
     },
     
-    mimetype(type){
+    setMode(type){
       this.active.mode=type.mode
     },
     
diff --git a/src/vue-poc/lib/vue-compile/vue-compile.xqm b/src/vue-poc/lib/vue-compile/vue-compile.xqm
index 2101897..d9fa96e 100644
--- a/src/vue-poc/lib/vue-compile/vue-compile.xqm
+++ b/src/vue-poc/lib/vue-compile/vue-compile.xqm
@@ -90,10 +90,9 @@ as xs:string
  :)
 declare function vue:compile($proj as xs:string)
 {
-let $FEATURES:="features/"=>file:resolve-path($proj=>trace("proj:"))
-let $COMPONENTS:="components/"=>file:resolve-path($proj)
-let $FILTERS:="components/filters.js"=>file:resolve-path($proj)
-
+let $FEATURES:= file:resolve-path("features/",$proj=>trace("proj:"))
+let $COMPONENTS:= file:resolve-path("components/",$proj)
+let $js:=vue:filelist(file:resolve-path("components/",$proj),".*\.js")
 let $CORE:="core.js"=>file:resolve-path($proj)
 let $ROUTER:="router.js"=>file:resolve-path($proj)
 let $APP:="app.vue"=>file:resolve-path($proj)
@@ -110,13 +109,20 @@ let $comps:=$files!vue:feature-build(.,true())
 let $comment:="// generated " || current-dateTime() || "&#xA;&#xD;"
 return file:write-text($DEST,string-join(($comment,
                                          $comps,
-                                         vue:js-test($FILTERS),
+                                         $js!vue:js-test(.),
                                          $feats,
                                          vue:js-test($ROUTER),
                                          $APP!vue:feature-build(.,false()),
                                          vue:js-test($CORE))))
 };
 
+(:~
+ : return sequence of file paths starting from $path matching $filter
+ :)
+ declare function vue:filelist($path as xs:string,$filter as xs:string){
+      fw:directory-list($path,map{"include-filter": $filter})
+             //c:file/@name/resolve-uri(.,base-uri(.))
+ };
 (:~
  : javascript source with comment
  :)
diff --git a/src/vue-poc/static/app-gen.js b/src/vue-poc/static/app-gen.js
index 1cbbc84..d286309 100644
--- a/src/vue-poc/static/app-gen.js
+++ b/src/vue-poc/static/app-gen.js
@@ -1,4 +1,4 @@
-// generated 2018-06-13T23:04:52.306+01:00
+// generated 2018-06-14T22:56:00.937+01:00
 
 // src: file:///C:/Users/andy/git/vue-poc/src/vue-poc/components/qd-autoheight.vue
 Vue.component('qd-autoheight',{template:` 
@@ -715,7 +715,7 @@ Vue.component('vue-ace',{template:`
 }
       );
       
-// src: C:\Users\andy\git\vue-poc\src\vue-poc\components\filters.js
+// src: file:///C:/Users/andy/git/vue-poc/src/vue-poc/components/filters.js
 /**
  * some vue filters, requires moment
  *  formatDate
@@ -762,6 +762,39 @@ Vue.filter('round', function(value, decimals) {
   return value;
 });
 
+// src: file:///C:/Users/andy/git/vue-poc/src/vue-poc/components/mimetypes.js
+// Mimetype info
+const MimeTypes={
+ toMode:[
+            {name: "text/plain", mode: "text"},
+            {name: "text/xml", mode: "xml"},
+            {name: "application/xml", mode:"xml"},
+            {name: "application/xquery", mode:"xquery"},
+            {name: "text/ecmascript", mode:"javascript"},
+            {name: "application/sparql-query", mode:"sparql"},
+            {name: "text/html", mode:"html"},
+            {name: "text/turtle", mode:"turtle"},
+            {name: "text/css", mode:"css"},
+            {name: "image/svg+xml", mode:"svg"}
+            ],
+  mode:{
+    "text": {},
+    "javascript": {
+      format(t){ return js_beautify(t, { indent_size: 2 })}
+    },
+    "xml": {
+      format(t){ return html_beautify(t, { indent_size: 3 ,indent_inner_html:true})}
+    },
+    "css": {}
+  },
+  install(Vue){
+      Object.defineProperty(Vue.prototype, '$MimeTypes', {
+        get () { return MimeTypes }
+    })  }
+
+};
+Vue.use(MimeTypes);
+
 // src: file:///C:/Users/andy/git/vue-poc/src/vue-poc/features/404.vue
 const Notfound=Vue.extend({template:` 
  <v-container fluid="">
@@ -1252,7 +1285,7 @@ const Edit=Vue.extend({template:`
   <v-menu left="" transition="v-fade-transition">
       <v-chip label="" small="" slot="activator">{{ mode }}</v-chip>
           <v-list dense="">
-              <v-list-tile v-for="type in mimeTypes" :key="type.name">
+              <v-list-tile v-for="type in $MimeTypes.toMode" :key="type.name">
                 <v-list-tile-title v-text="type.name" @click="setMode(type)"></v-list-tile-title>
               </v-list-tile>           
           </v-list>         
@@ -1379,8 +1412,7 @@ const Edit=Vue.extend({template:`
       message: "Cant do that",
       events:  new Vue({}),
       folded: false, // toggle fold/unfold action
-      aceSettings: { },
-      mimeTypes:MimeTypes
+      aceSettings: { }
     }
   },
   methods: {
@@ -1533,17 +1565,17 @@ const Tabs=Vue.extend({template:`
        <v-menu v-if="active" left="" transition="v-fade-transition">
        <v-chip label="" small="" slot="activator">{{ active.mode }}</v-chip>
           <v-list dense="">
-              <v-list-tile v-for="type in mimeTypes" :key="type.name">
-                <v-list-tile-title v-text="type.name" @click="mimetype(type)"></v-list-tile-title>
-              </v-list-tile>           
+                <v-list-tile v-for="type in $MimeTypes.toMode" :key="type.name">
+                <v-list-tile-title v-text="type.name" @click="setMode(type)"></v-list-tile-title>
+              </v-list-tile>         
           </v-list>         
       </v-menu>
       
        <v-menu v-if="active" left="" transition="v-fade-transition">
         <v-btn icon="" slot="activator"><v-icon>lightbulb_outline</v-icon></v-btn>
           <v-list dense="">
-              <v-list-tile v-for="type in mimeTypes" :key="type.name">
-                <v-list-tile-title v-text="type.name" @click="lightbulb(type.name)"></v-list-tile-title>
+                <v-list-tile v-for="type in $MimeTypes.toMode" :key="type.name">
+                <v-list-tile-title v-text="type.name" @click="setMode(type)"></v-list-tile-title>
               </v-list-tile>           
           </v-list>         
       </v-menu>
@@ -1626,8 +1658,7 @@ const Tabs=Vue.extend({template:`
         active: null,
         items: [],
       wrap: true,
-      aceSettings: {},
-      mimeTypes: MimeTypes
+      aceSettings: {}
       }
   },
   
@@ -1650,11 +1681,10 @@ const Tabs=Vue.extend({template:`
     },
     
     openUri(){
-      console.log("mimetypes: ",this.mimeTypes);
       alert("openUri TODO")
     },
     
-    mimetype(type){
+    setMode(type){
       this.active.mode=type.mode
     },
     
@@ -5730,19 +5760,6 @@ const Notification={
 };
 Vue.use(Notification);
 
-// Mimetype info
-const MimeTypes=[
-            {name: "text/plain", mode: "text"},
-            {name: "text/xml", mode: "xml"},
-            {name: "application/xml", mode:"xml"},
-            {name: "application/xquery", mode:"xquery"},
-            {name: "text/ecmascript", mode:"javascript"},
-            {name: "application/sparql-query", mode:"sparql"},
-            {name: "text/html", mode:"html"},
-            {name: "text/turtle", mode:"turtle"},
-            {name: "text/css", mode:"css"},
-            {name: "image/svg+xml", mode:"svg"}
-];
 
 // Settings read and write list clear
 localforage.config({
diff --git a/src/vue-poc/static/serviceworker.js b/src/vue-poc/static/serviceworker.js
index 905c62e..74a4433 100644
--- a/src/vue-poc/static/serviceworker.js
+++ b/src/vue-poc/static/serviceworker.js
@@ -1,5 +1,11 @@
 "use strict";
+importScripts('https://storage.googleapis.com/workbox-cdn/releases/3.2.0/workbox-sw.js');
 
+if (workbox) {
+  console.log(`Yay! Workbox is loaded 🎉`);
+} else {
+  console.log(`Boo! Workbox didn't load 😬`);
+};
 console.log('WORKER: executing.');
 
 /* A version number is useful when updating the worker logic,