First component (test)

.editorconfig

@@ -3,7 +3,7 @@ root = true
 [*]
 charset = utf-8
 indent_style = space
-indent_size = 4
+indent_size = 2
 end_of_line = lf
 insert_final_newline = true
 trim_trailing_whitespace = true

package.json

@@ -17,7 +17,6 @@
   "devDependencies": {
     "autoprefixer": "^7.1.5",
     "babel-core": "^6.26.0",
-    "sw-precache-webpack-plugin": "^0.11.4",
     "babel-eslint": "^8.0.1",
     "babel-loader": "^7.1.2",
     "babel-plugin-transform-runtime": "^6.23.0",
@@ -30,12 +29,12 @@
     "css-loader": "^0.28.7",
     "cssnano": "^3.10.0",
     "eslint": "^4.9.0",
+    "eslint-config-standard": "^10.2.1",
     "eslint-friendly-formatter": "^3.0.0",
     "eslint-loader": "^1.9.0",
     "eslint-plugin-html": "^3.2.2",
     "eslint-plugin-import": "^2.7.0",
     "eslint-plugin-node": "^5.2.0",
-    "eslint-config-standard": "^10.2.1",
     "eslint-plugin-promise": "^3.6.0",
     "eslint-plugin-standard": "^3.0.1",
     "eventsource-polyfill": "^0.9.6",
@@ -45,22 +44,26 @@
     "friendly-errors-webpack-plugin": "^1.6.1",
     "html-webpack-plugin": "^2.30.1",
     "http-proxy-middleware": "^0.17.4",
-    "webpack-bundle-analyzer": "^2.9.0",
-    "semver": "^5.4.1",
-    "shelljs": "^0.7.8",
+    "node-sass": "^4.13.1",
     "opn": "^5.1.0",
     "optimize-css-assets-webpack-plugin": "^3.2.0",
     "ora": "^1.3.0",
     "rimraf": "^2.6.2",
+    "sass-loader": "^8.0.2",
+    "semver": "^5.4.1",
+    "shelljs": "^0.7.8",
+    "sw-precache-webpack-plugin": "^0.11.4",
+    "uglify-es": "^3.1.3",
     "url-loader": "^0.6.2",
+    "vue-i18n": "^8.15.3",
     "vue-loader": "^13.3.0",
     "vue-style-loader": "^3.0.3",
     "vue-template-compiler": "^2.5.2",
     "webpack": "^3.7.1",
+    "webpack-bundle-analyzer": "^2.9.0",
     "webpack-dev-middleware": "^1.12.0",
     "webpack-hot-middleware": "^2.19.1",
-    "webpack-merge": "^4.1.0",
-    "uglify-es": "^3.1.3"
+    "webpack-merge": "^4.1.0"
   },
   "engines": {
     "node": ">= 4.0.0",

src/components/Hello.vue

@@ -1,6 +1,8 @@
 <template>
   <div class="hello">
     <h1>{{ msg }}</h1>
+
+    <a href="maps">Go to selector</a>
     <h2>Essential Links</h2>
     <ul>
       <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>

src/components/MapSelector.vue

@@ -0,0 +1,30 @@
+<div class="map-selector">
+  <h1 class="map-selector__title">Map Selector</h1>
+  <ul>
+    <li v-for="map in maps"><a>map.name</a></li>
+  </ul>
+</div>
+
+
+<script type="text/javascript">
+  const MAPS = {
+    alteracPass: {
+      name: 'Alterac Pass'
+    },
+    battlefieldOfEternity: {
+      name: 'Battlefield of Etnernity'
+    },
+    blackheartSBay: {
+      name: "Blackheart's Bay"
+    }
+  }
+
+  module.exports = {
+    name: 'MapSelector',
+    data: function () {
+      return {
+        maps: MAPS
+      }
+    }
+  }
+</script>

src/main.js

@@ -3,8 +3,10 @@
 import Vue from 'vue'
 import App from './App'
 import router from './router'
+import VueI18n from 'vue-i18n'
 
 Vue.config.productionTip = false
+Vue.use(VueI18n)
 
 /* eslint-disable no-new */
 new Vue({

src/router/index.js

@@ -1,6 +1,8 @@
 import Vue from 'vue'
 import Router from 'vue-router'
+
 import Hello from '@/components/Hello'
+import MapSelector from '@/components/MapSelector'
 
 Vue.use(Router)
 
@@ -10,6 +12,11 @@ export default new Router({
       path: '/',
       name: 'Hello',
       component: Hello
+    },
+    {
+      path: 'maps',
+      name: 'Map selector',
+      component: MapSelector
     }
   ]
 })

static/manifest.json

@@ -1,6 +1,6 @@
 {
-  "name": "nexus-timers",
-  "short_name": "nexus-timers",
+  "name": "Nexus Timers",
+  "short_name": "Nexus Timers",
   "icons": [
     {
       "src": "/static/img/icons/android-chrome-192x192.png",