restructured the application for modularity

.eslintrc.js

@@ -22,6 +22,8 @@ module.exports = {
     // allow async-await
     'generator-star-spacing': 0,
     // allow debugger during development
-    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0
+    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
+    // require semicolons
+    "semi": [2, "always"]
   }
 }

package.json

@@ -13,26 +13,34 @@
     "lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs"
   },
   "dependencies": {
+    "bulma": "^0.3.1",
+    "localforage": "^1.4.3",
     "vue": "^2.1.10",
-    "vue-router": "^2.2.0"
+    "vue-router": "^2.2.0",
+    "vuex": "^2.1.2"
   },
   "devDependencies": {
     "autoprefixer": "^6.7.2",
     "babel-core": "^6.22.1",
     "babel-eslint": "^7.1.1",
     "babel-loader": "^6.2.10",
+    "babel-plugin-istanbul": "^3.1.2",
     "babel-plugin-transform-runtime": "^6.22.0",
     "babel-preset-es2015": "^6.22.0",
     "babel-preset-stage-2": "^6.22.0",
     "babel-register": "^6.22.0",
+    "chai": "^3.5.0",
     "chalk": "^1.1.3",
+    "chromedriver": "^2.27.2",
     "connect-history-api-fallback": "^1.3.0",
+    "cross-env": "^3.1.4",
+    "cross-spawn": "^5.0.1",
     "css-loader": "^0.26.1",
     "eslint": "^3.14.1",
+    "eslint-config-standard": "^6.2.1",
     "eslint-friendly-formatter": "^2.0.7",
     "eslint-loader": "^1.6.1",
     "eslint-plugin-html": "^2.0.0",
-    "eslint-config-standard": "^6.2.1",
     "eslint-plugin-promise": "^3.4.0",
     "eslint-plugin-standard": "^2.0.1",
     "eventsource-polyfill": "^0.9.6",
@@ -43,8 +51,7 @@
     "function-bind": "^1.1.0",
     "html-webpack-plugin": "^2.28.0",
     "http-proxy-middleware": "^0.17.3",
-    "webpack-bundle-analyzer": "^2.2.1",
-    "cross-env": "^3.1.4",
+    "inject-loader": "^2.0.1",
     "karma": "^1.4.1",
     "karma-coverage": "^1.1.1",
     "karma-mocha": "^1.3.0",
@@ -55,25 +62,24 @@
     "karma-webpack": "^2.0.2",
     "lolex": "^1.5.2",
     "mocha": "^3.2.0",
-    "chai": "^3.5.0",
-    "sinon": "^1.17.7",
-    "sinon-chai": "^2.8.0",
-    "inject-loader": "^2.0.1",
-    "babel-plugin-istanbul": "^3.1.2",
-    "phantomjs-prebuilt": "^2.1.14",
-    "chromedriver": "^2.27.2",
-    "cross-spawn": "^5.0.1",
     "nightwatch": "^0.9.12",
-    "selenium-server": "^3.0.1",
-    "semver": "^5.3.0",
+    "node-sass": "^4.5.0",
     "opn": "^4.0.2",
     "ora": "^1.1.0",
+    "phantomjs-prebuilt": "^2.1.14",
+    "sass-loader": "^5.0.1",
+    "scss-loader": "0.0.1",
+    "selenium-server": "^3.0.1",
+    "semver": "^5.3.0",
     "shelljs": "^0.7.6",
+    "sinon": "^1.17.7",
+    "sinon-chai": "^2.8.0",
     "url-loader": "^0.5.7",
     "vue-loader": "^10.3.0",
     "vue-style-loader": "^2.0.0",
     "vue-template-compiler": "^2.1.10",
     "webpack": "^2.2.1",
+    "webpack-bundle-analyzer": "^2.2.1",
     "webpack-dev-middleware": "^1.10.0",
     "webpack-hot-middleware": "^2.16.1",
     "webpack-merge": "^2.6.1"

src/App.vue → src/app/App.vue

@@ -1,14 +1,14 @@
 <template>
   <div id="app">
-    <img src="./assets/logo.png">
+    <img src="../assets/logo.png">
     <router-view></router-view>
   </div>
 </template>
 
 <script>
 export default {
   name: 'app'
-}
+};
 </script>
 
 <style>

src/app/accounts/components/AccountsListView.vue

@@ -0,0 +1,16 @@
+<template>
+  <div id="accounts-list-view">
+    I'm a list of accounts!
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'accounts-list-view'
+};
+</script>
+
+<style scoped lang='scss'>
+#accounts-list-view {
+}
+</style>

src/app/accounts/components/index.js

@@ -0,0 +1 @@
+export { default as AccountsListView } from './AccountsListView';

src/app/accounts/index.js

@@ -0,0 +1,2 @@
+export { default as routes } from './routes';
+export { default as vuex } from './vuex';

src/app/accounts/routes.js

@@ -0,0 +1,8 @@
+import * as components from './components';
+
+export default [
+  {
+    path: '/',
+    component: components.AccountsListView
+  }
+];

src/app/accounts/vuex/actions.js

@@ -0,0 +1,3 @@
+export const doSomething = ({ commit }, data) => {
+  commit('DO_SOMETHING', { data: data });
+};

src/app/accounts/vuex/index.js

@@ -0,0 +1,12 @@
+import * as actions from './actions';
+import mutations from './mutations';
+
+const state = {
+  something: {}
+};
+
+export default {
+  state,
+  actions,
+  mutations
+};

src/app/accounts/vuex/mutations.js

@@ -0,0 +1,5 @@
+export default {
+  DO_SOMETHING (state, { data }) {
+    state.something = data;
+  }
+};

src/app/index.js

@@ -0,0 +1,3 @@
+export { default as routes } from './routes';
+export { default as vuex } from './vuex';
+export { default as App } from './App';

src/app/routes.js

@@ -0,0 +1,3 @@
+import { routes as accounts } from './accounts';
+
+export default [ ...accounts ];

src/app/vuex.js

@@ -0,0 +1,3 @@
+import { vuex as accounts } from './accounts';
+
+export default { accounts };

src/main.js

@@ -1,13 +1,15 @@
 // The Vue build version to load with the `import` command
 // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
-import Vue from 'vue'
-import App from './App'
-import router from './router'
+import Vue from 'vue';
+import { App } from './app';
+import router from './router';
+import store from './store';
 
 /* eslint-disable no-new */
 new Vue({
   el: '#app',
+  store,
   router,
   template: '<App/>',
   components: { App }
-})
+});

src/router/index.js

@@ -1,15 +1,10 @@
-import Vue from 'vue'
-import Router from 'vue-router'
-import Hello from 'components/Hello'
+import Vue from 'vue';
+import Router from 'vue-router';
+import { routes } from '../app';
 
-Vue.use(Router)
+Vue.use(Router);
 
 export default new Router({
-  routes: [
-    {
-      path: '/',
-      name: 'Hello',
-      component: Hello
-    }
-  ]
-})
+  mode: 'history',
+  routes: routes
+});

src/store/index.js

@@ -0,0 +1,12 @@
+import Vue from 'vue';
+import Vuex from 'vuex';
+import { vuex } from '../app';
+
+Vue.use(Vuex);
+
+const debug = process.env.NODE_ENV !== 'production';
+
+export default new Vuex.Store({
+  modules: vuex,
+  strict: debug
+});