Dev.vue uses component vvpcs-initial-test from NPM

README.md

@@ -191,6 +191,48 @@ h1, h2
 ```
 
 
+### Create a component which demonstrates routing and NPM composition
+
+The new component is `src/components/Dev.vue`:
+
+```
+<template lang="pug">
+div#dev
+  h1 Dev
+  h1 Count: {{ state.count }}
+  button(@click="incrCount") Increment
+  initial-test
+  foobar
+</template>
+
+<script lang="coffee">
+import store from './Store'
+import InitialTest from 'vvpcs-initial-test' # defined by `main` in package.json
+import FooBar from 'vvpcs-initial-test/FooBar'
+export default
+    name: 'Dev'
+    data: () ->
+        state: store.state
+    methods:
+        incrCount: ->
+            store.commit 'increment'
+    components:
+        'initial-test': InitialTest
+        'foobar': FooBar
+</script>
+
+<style lang="stylus" scoped>
+h1, h2
+  font-weight bold
+</style>
+```
+
+You’ll need to import its dependency from NPM:  
+`$ npm i --save vvpcs-initial-test`
+
+@TODO unit test vvpcs-initial-test
+
+
 ### Get routing working
 
 `src/router/index.js` becomes `src/router/index.coffee`, and changes to:

package.json

@@ -17,7 +17,8 @@
     "babel-polyfill": "^6.26.0",
     "vue": "^2.4.2",
     "vue-router": "^2.7.0",
-    "vuex": "^2.4.1"
+    "vuex": "^2.4.1",
+    "vvpcs-initial-test": "^1.0.0"
   },
   "devDependencies": {
     "autoprefixer": "^7.1.2",

src/components/Dev.vue

@@ -3,10 +3,14 @@ div#dev
   h1 Dev
   h1 Count: {{ state.count }}
   button(@click="incrCount") Increment
+  initial-test
+  foobar
 </template>
 
 <script lang="coffee">
 import store from './Store'
+import InitialTest from 'vvpcs-initial-test' # defined by `main` in package.json
+import FooBar from 'vvpcs-initial-test/FooBar'
 export default
     name: 'Dev'
     data: () ->
@@ -14,6 +18,9 @@ export default
     methods:
         incrCount: ->
             store.commit 'increment'
+    components:
+        'initial-test': InitialTest
+        'foobar': FooBar
 </script>
 
 <style lang="stylus" scoped>