Nav bar and route is functional.

src/ui/Domo/package.json

@@ -12,8 +12,11 @@
     "test": "npm run unit && npm run e2e"
   },
   "dependencies": {
+    "babel-runtime": "^6.0.0",
+    "fastclick": "^1.0.6",
     "vue": "^1.0.21",
-    "babel-runtime": "^6.0.0"
+    "vue-router": "^0.7.13",
+    "vux": "0.0.116"
   },
   "devDependencies": {
     "babel-core": "^6.0.0",

src/ui/Domo/src/App.vue

@@ -1,54 +1,55 @@
 <template>
   <div id="app">
-    <img class="logo" src="./assets/logo.png">
+    <router-view transition transition-mode="out-in">
-    <hello></hello>
+    </router-view>
-    <p>
+    <tabbar>
-      Welcome to your Vue.js app!
+      <tabbar-item is-link v-link="'/'">
-    </p>
+        <!--<img slot="icon" src="assets/plv/icon_nav_cell.png">-->
-    <p style="color:red">
+        <span slot="label">Home</span>
-      It seems you are using an outdated version of vue-cli.<br>
+      </tabbar-item>
-      Upgrade to vue-cli@2.x to get access to newer versions of this template.
+      <tabbar-item is-link v-link="'/lights'">
-    </p>
+        <!--<img slot="icon" src="assets/plv/icon_nav_button.png">-->
+        <span slot="label">Lights</span>
+      </tabbar-item>
+      <tabbar-item is-link v-link="'/sprinklers'">
+        <!--<img slot="icon" src="assets/plv/icon_nav_article.png">-->
+        <span slot="label">Shutters</span>
+      </tabbar-item>
+      <tabbar-item is-link v-link="'/shutters'">
+        <!--<img slot="icon" src="assets/plv/icon_nav_article.png">-->
+        <span slot="label">Sprinklers</span>
+      </tabbar-item>
+      <tabbar-item is-link v-link="'/timers'">
+        <!--<img slot="icon" src="assets/plv/icon_nav_article.png">-->
+        <span slot="label">Timers</span>
+      </tabbar-item>
+      <tabbar-item is-link v-link="'/settings'">
+        <!--<img slot="icon" src="assets/plv/icon_nav_article.png">-->
+        <span slot="label">Settings</span>
+      </tabbar-item>
+    </tabbar>
   </div>
 </template>
 
 <script>
-import Hello from './components/Hello'
+import Tabbar from 'vux/components/tabbar'
+import TabbarItem from 'vux/components/tabbar-item'
 
 export default {
   components: {
-    Hello
+    Tabbar,
+    TabbarItem
   }
 }
+
 </script>
 
 <style>
-html {
+@import '~vux/vux.css';
-  height: 100%;
-}
 
 body {
-  display: flex;
+  font-family: Helvetica, sans-serif;
-  align-items: center;
+  background-color: #fbf9fe;
-  justify-content: center;
+  padding-bottom:50px;
-  height: 100%;
-}
-
-#app {
-  color: #2c3e50;
-  margin-top: -100px;
-  max-width: 600px;
-  font-family: Source Sans Pro, Helvetica, sans-serif;
-  text-align: center;
-}
-
-#app a {
-  color: #42b983;
-  text-decoration: none;
-}
-
-.logo {
-  width: 100px;
-  height: 100px
 }
 </style>

src/ui/Domo/src/components/Hello.vue

@@ -1,26 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-  </div>
-</template>
-
-<script>
-export default {
-  data () {
-    return {
-      // note: changing this line won't causes changes
-      // with hot-reload because the reloaded component
-      // preserves its current state and we are modifying
-      // its initial state.
-      msg: 'Hello World!'
-    }
-  }
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-h1 {
-  color: #42b983;
-}
-</style>

src/ui/Domo/src/components/Home.vue

@@ -0,0 +1,6 @@
+<template>
+<h1>Home</h1>
+</template>
+
+<script>
+</script>

src/ui/Domo/src/components/Lights.vue

@@ -0,0 +1,6 @@
+<template>
+<h1>Lights</h1>
+</template>
+
+<script>
+</script>

src/ui/Domo/src/components/Settings.vue

@@ -0,0 +1,6 @@
+<template>
+<h1>Settings</h1>
+</template>
+
+<script>
+</script>

src/ui/Domo/src/components/Shutters.vue

@@ -0,0 +1,6 @@
+<template>
+<h1>Shutters</h1>
+</template>
+
+<script>
+</script>

src/ui/Domo/src/components/Sprinklers.vue

@@ -0,0 +1,6 @@
+<template>
+<h1>Sprinklers</h1>
+</template>
+
+<script>
+</script>

src/ui/Domo/src/components/Timers.vue

@@ -0,0 +1,6 @@
+<template>
+<h1>Timers</h1>
+</template>
+
+<script>
+</script>

src/ui/Domo/src/main.js

@@ -1,8 +1,42 @@
 import Vue from 'vue'
+import Router from 'vue-router'
+
 import App from './App'
 
-/* eslint-disable no-new */
+import Home from './components/Home'
-new Vue({
+import Lights from './components/Lights'
-  el: 'body',
+import Shutters from './components/Shutters'
-  components: { App }
+import Sprinklers from './components/Sprinklers'
+import Timers from './components/Timers'
+import Settings from './components/Settings'
+
+const FastClick = require('fastclick')
+FastClick.attach(document.body)
+
+Vue.use(Router)
+Vue.config.devtools = true
+
+const router = new Router()
+
+router.map({
+  '/': {
+    component: Home
+  },
+  '/lights': {
+    component: Lights
+  },
+  '/shutters': {
+    component: Shutters
+  },
+  '/sprinklers': {
+    component: Sprinklers
+  },
+  '/timers': {
+    component: Timers
+  },
+  '/settings': {
+    component: Settings
+  }
 })
+
+router.start(App, 'app')