Refactor into a single file component.

woodcoder · woodcoder · commit c094572de34f · 2016-10-04T11:07:12.000+01:00
Note the use of the browser field in the package.json to avoid the error "Failed to mount component: template or render function not defined. (found in root instance)" due to using the default runtime build. See https://vuejs.org/guide/installation.html#Standalone-vs-Runtime-only-Build .
diff --git a/.gitignore b/.gitignore
@@ -1,4 +1,4 @@
 .DS_Store
 node_modules/
-dist/build.js
+dist/app.js
 npm-debug.log
diff --git a/dist/.gitkeep b/dist/.gitkeep
diff --git a/index.html b/index.html
@@ -7,46 +7,8 @@
   </head>
   <body>
     <div id="app">
-      <select v-model="type">
-        <option value="dice">Board Game</option>
-        <option value="spades">Card Game</option>
-      </select>
-      <input v-model="game" @keyup.enter="addGame">
-      <button @click="addGame">Add</button>
-      <p v-if="empty">Zarro Boords!</p>
-      <ul v-else>
-        <li v-for="g in games">
-          <span :class="icon(g.type)"></span>
-          {{ g.game }}
-        </li>
-      </ul>
+      <board-library></board-library>
     </div>
-    <script src="node_modules/vue/dist/vue.js"></script>
-    <script>
-      var app = new Vue({
-        el: '#app',
-        data: {
-          game: '',
-          type: 'dice',
-          games: []
-        },
-        computed: {
-          empty: function() {
-            return this.games.length == 0
-          }
-        },
-        methods: {
-          addGame: function () {
-            this.games.push({
-              game: this.game,
-              type: this.type
-            })
-          },
-          icon: function (type) {
-            return 'icon-' + type
-          }
-        }
-      })
-    </script>
+    <script src="dist/app.js"></script>
   </body>
 </html>
diff --git a/package.json b/package.json
@@ -4,10 +4,10 @@
   "author": "Andy Wood <andy@ideaflip.com>",
   "private": true,
   "scripts": {
-    "watchify": "watchify -vd -p browserify-hmr -e src/main.js -o dist/build.js",
+    "watchify": "watchify -vd -p browserify-hmr -e src/main.js -o dist/app.js",
     "serve": "http-server -o -s -c 1 -a localhost",
     "dev": "npm-run-all --parallel watchify serve",
-    "build": "cross-env NODE_ENV=production browserify -g envify src/main.js | uglifyjs -c warnings=false -m > dist/build.js"
+    "build": "cross-env NODE_ENV=production browserify -g envify src/main.js | uglifyjs -c warnings=false -m > dist/app.js"
   },
   "dependencies": {
     "vue": "^2.0.1"
@@ -26,6 +26,9 @@
     "vueify": "^9.1.0",
     "watchify": "^3.4.0"
   },
+  "browser": {
+      "vue": "vue/dist/vue.js"
+  },
   "browserify": {
     "transform": [
       "vueify",
diff --git a/src/BoardLibrary.vue b/src/BoardLibrary.vue
@@ -0,0 +1,45 @@
+<template>
+  <div>
+    <select v-model="type">
+      <option value="dice">Board Game</option>
+      <option value="spades">Card Game</option>
+    </select>
+    <input v-model="game" @keyup.enter="addGame">
+    <button @click="addGame">Add</button>
+    <p v-if="empty">Zarro Boords!</p>
+    <ul v-else>
+      <li v-for="g in games">
+        <span :class="icon(g.type)"></span>
+        {{ g.game }}
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+module.exports = {
+  data: function() {
+    return {
+      game: '',
+      type: 'dice',
+      games: []
+    }
+  },
+  computed: {
+    empty: function() {
+      return this.games.length == 0
+    }
+  },
+  methods: {
+    addGame: function () {
+      this.games.push({
+        game: this.game,
+        type: this.type
+      })
+    },
+    icon: function (type) {
+      return 'icon-' + type
+    }
+  }
+}
+</script>
diff --git a/src/main.js b/src/main.js
@@ -0,0 +1,7 @@
+var Vue = require('vue')
+var BoardLibrary = require('./BoardLibrary.vue')
+
+Vue.component('board-library', BoardLibrary)
+var app = new Vue({
+  el: '#app'
+})
