skeleton using vue router.

src/ui/Domo/package.json

@@ -9,7 +9,8 @@
     "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
   },
   "dependencies": {
-    "vue": "^1.0.17"
+    "vue": "^1.0.17",
+    "vue-router": "^0.7.7"
   },
   "devDependencies": {
     "babel-core": "^6.0.0",

src/ui/Domo/src/App.vue

@@ -1,25 +0,0 @@
-<template>
-  <div id="app">
-    <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 Vue!'
-    }
-  }
-}
-</script>
-
-<style>
-body {
-  font-family: Helvetica, sans-serif;
-}
-</style>

src/ui/Domo/src/app.vue

@@ -0,0 +1,9 @@
+<template>
+   <router-view></router-view>
+</template>
+
+<!--
+<style src="./assets/css/mui.css"></style>
+<style src="./assets/css/app-base.css"></style>
+<style src="./assets/css/app-index.css"></style>
+-->

src/ui/Domo/src/components/index.vue

@@ -0,0 +1,5 @@
+<template>
+
+<h1> Index </h1>
+
+</template>

src/ui/Domo/src/components/lights.vue

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

src/ui/Domo/src/components/shutters.vue

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

src/ui/Domo/src/components/sprinklers.vue

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

src/ui/Domo/src/main.js

@@ -1,7 +1,13 @@
-import Vue from 'vue'
+var Vue = require('vue')
-import App from './App.vue'
+var VueRouter = require('vue-router')
 
-new Vue({
+var App = require('./app.vue')
-  el: 'body',
+var routerMap = require('./router')
-  components: { App }
+
-})
+Vue.use(VueRouter);
+
+var router = new VueRouter()
+
+routerMap(router)
+
+router.start(App, 'app')

src/ui/Domo/src/router.js

@@ -0,0 +1,20 @@
+module.exports = function(router){
+	router.map({
+		'*': {
+            component: require('./components/index.vue')
+        },
+        '/': {
+            component: require('./components/index.vue')
+        },
+        '/lights': {
+            component: require('./components/lights.vue')
+        },
+        '/shutters': {
+            component: require('./components/shutters.vue')
+        },
+        '/sprinklers': {
+            component: require('./components/sprinklers.vue')
+        }
+    })
+	
+}