From 9ac967fb917cef97f9fd4743108b97e2c1afd540 Mon Sep 17 00:00:00 2001
From: Shaun Pelling <shaunjp@shaun-pelling.com>
Date: Mon, 3 Apr 2017 07:16:45 +0100
Subject: [PATCH 01/18] added lesson 25 code

---
 src/components/Footer.vue | 8 ++++++++
 src/components/Header.vue | 7 ++++++-
 src/main.js               | 2 ++
 3 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/src/components/Footer.vue b/src/components/Footer.vue
index 89c8051..3f98bf2 100644
--- a/src/components/Footer.vue
+++ b/src/components/Footer.vue
@@ -4,6 +4,9 @@
     </footer>
 </template>
 <script>
+// imports
+import { bus } from '../main';
+
 export default {
     props: {
       title: {
@@ -15,6 +18,11 @@ export default {
         return{
 
         }
+    },
+    created(){
+        bus.$on('titleChanged', (data) => {
+            this.title = data;
+        });
     }
 }
 </script>
diff --git a/src/components/Header.vue b/src/components/Header.vue
index 44d4753..4fc9259 100644
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -4,6 +4,9 @@
     </header>
 </template>
 <script>
+// imports
+import { bus } from '../main';
+
 export default {
     props: {
       title: {
@@ -18,7 +21,9 @@ export default {
     },
     methods: {
       changeTitle: function(){
-        this.$emit('changeTitle', 'Vue Ninjas');
+        // this.$emit('changeTitle', 'Vue Ninjas');
+        this.title = 'Vue Ninjas';
+        bus.$emit('titleChanged', 'Vue Ninjas');
       }
     }
 }
diff --git a/src/main.js b/src/main.js
index 385fcfe..c3bc030 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,6 +1,8 @@
 import Vue from 'vue'
 import App from './App.vue'
 
+export const bus = new Vue();
+
 new Vue({
   el: '#app',
   render: h => h(App)

From 4a750e87237be2fed18d93a812e52f99193619a8 Mon Sep 17 00:00:00 2001
From: Shaun Pelling <shaunjp@shaun-pelling.com>
Date: Mon, 3 Apr 2017 09:14:50 +0100
Subject: [PATCH 02/18] lesson 26 code added

---
 src/components/Header.vue | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

diff --git a/src/components/Header.vue b/src/components/Header.vue
index 4fc9259..26f951b 100644
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -25,6 +25,25 @@ export default {
         this.title = 'Vue Ninjas';
         bus.$emit('titleChanged', 'Vue Ninjas');
       }
+    },
+    // lifecycle hooks
+    beforeCreate(){
+        alert('beforeCreate');
+    },
+    created(){
+        alert('created');
+    },
+    beforeMount(){
+        alert('beforeMount');
+    },
+    mounted(){
+        alert('mounted');
+    },
+    beforeUpdate(){
+        alert('beforeUpdate');
+    },
+    updated(){
+        alert('updated');
     }
 }
 </script>

From fa5b237720cdb6d292cdcc853924c844d4d37608 Mon Sep 17 00:00:00 2001
From: Shaun Pelling <shaunjp@shaun-pelling.com>
Date: Mon, 3 Apr 2017 10:00:02 +0100
Subject: [PATCH 03/18] added lesson 27 code

---
 src/App.vue                   | 43 ++++++++++------------
 src/components/Footer.vue     | 38 -------------------
 src/components/Header.vue     | 59 ------------------------------
 src/components/Ninjas.vue     | 54 ---------------------------
 src/components/formHelper.vue | 69 +++++++++++++++++++++++++++++++++++
 src/main.js                   |  2 -
 6 files changed, 88 insertions(+), 177 deletions(-)
 delete mode 100644 src/components/Footer.vue
 delete mode 100644 src/components/Header.vue
 delete mode 100644 src/components/Ninjas.vue
 create mode 100644 src/components/formHelper.vue

diff --git a/src/App.vue b/src/App.vue
index 7b5bbb8..e59cd31 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,43 +1,38 @@
 <template>
     <div>
-        <app-header v-bind:title="title" v-on:changeTitle="updateTitle($event)"></app-header>
-        <app-ninjas v-bind:ninjas="ninjas"></app-ninjas>
-        <ul>
-          <li v-for="ninja in ninjas">{{ ninja.name }}</li>
-        </ul>
-        <app-footer v-bind:title="title"></app-footer>
+        <form-helper>
+            <div slot="form-header">
+                <h3>This is the title of a form</h3>
+                <p>This is some info about the form</p>
+            </div>
+            <div slot="form-fields">
+                <input type="text" placeholder="name" required />
+                <input type="password" placeholder="password" required />
+            </div>
+            <div slot="form-controls">
+                <button v-on:click="handleSubmit">Submit</button>
+            </div>
+        </form-helper>
     </div>
 </template>
 
 <script>
 // Imports
-import Header from './components/Header.vue';
-import Footer from './components/Footer.vue';
-import Ninjas from './components/Ninjas.vue';
+import formHelper from './components/formHelper.vue'
 
 export default {
     components: {
-        'app-header': Header,
-        'app-footer': Footer,
-        'app-ninjas': Ninjas
+        'form-helper': formHelper
     },
     data () {
         return {
-          ninjas: [
-              {name: 'Ryu', speciality: 'Vue Components', show: false},
-              {name: 'Crystal', speciality: 'HTML Wizardry', show: false},
-              {name: 'Hitoshi', speciality: 'Click Events', show: false},
-              {name: 'Tango', speciality: 'Conditionals', show: false},
-              {name: 'Kami', speciality: 'Webpack', show: false},
-              {name: 'Yoshi', speciality: 'Data Diggin', show: false}
-          ],
-          title: 'Vue Wizards'
+
         }
     },
     methods: {
-      updateTitle: function(updatedTitle){
-        this.title = updatedTitle;
-      }
+        handleSubmit: function(){
+            alert('thanks for submitting');
+        }
     }
 }
 </script>
diff --git a/src/components/Footer.vue b/src/components/Footer.vue
deleted file mode 100644
index 3f98bf2..0000000
--- a/src/components/Footer.vue
+++ /dev/null
@@ -1,38 +0,0 @@
-<template>
-    <footer>
-        <p>Copyright 2017 {{ title }}</p>
-    </footer>
-</template>
-<script>
-// imports
-import { bus } from '../main';
-
-export default {
-    props: {
-      title: {
-        type: String,
-        required: true
-      }
-    },
-    data(){
-        return{
-
-        }
-    },
-    created(){
-        bus.$on('titleChanged', (data) => {
-            this.title = data;
-        });
-    }
-}
-</script>
-<style scoped>
-footer{
-    background: #222;
-    padding: 6px;
-}
-p{
-        color: lightgreen;
-        text-align: center;
-}
-</style>
diff --git a/src/components/Header.vue b/src/components/Header.vue
deleted file mode 100644
index 26f951b..0000000
--- a/src/components/Header.vue
+++ /dev/null
@@ -1,59 +0,0 @@
-<template>
-    <header>
-        <h1 v-on:click="changeTitle">{{ title }}</h1>
-    </header>
-</template>
-<script>
-// imports
-import { bus } from '../main';
-
-export default {
-    props: {
-      title: {
-        type: String,
-        required: true
-      }
-    },
-    data(){
-        return{
-
-        }
-    },
-    methods: {
-      changeTitle: function(){
-        // this.$emit('changeTitle', 'Vue Ninjas');
-        this.title = 'Vue Ninjas';
-        bus.$emit('titleChanged', 'Vue Ninjas');
-      }
-    },
-    // lifecycle hooks
-    beforeCreate(){
-        alert('beforeCreate');
-    },
-    created(){
-        alert('created');
-    },
-    beforeMount(){
-        alert('beforeMount');
-    },
-    mounted(){
-        alert('mounted');
-    },
-    beforeUpdate(){
-        alert('beforeUpdate');
-    },
-    updated(){
-        alert('updated');
-    }
-}
-</script>
-<style scoped>
-header{
-    background: lightgreen;
-    padding: 10px;
-}
-h1{
-    color: #222;
-    text-align: center;
-}
-</style>
diff --git a/src/components/Ninjas.vue b/src/components/Ninjas.vue
deleted file mode 100644
index c38a61b..0000000
--- a/src/components/Ninjas.vue
+++ /dev/null
@@ -1,54 +0,0 @@
-<template>
-    <div id="ninjas">
-        <ul>
-            <li v-for="ninja in ninjas" v-on:click="ninja.show = !ninja.show">
-                <h2>{{ ninja.name }}</h2>
-                <h3 v-show="ninja.show">{{ ninja.speciality }}</h3>
-            </li>
-        </ul>
-        <button v-on:click="deleteNinja">Delete a Ninja</button>
-    </div>
-</template>
-<script>
-export default {
-    props: {
-      ninjas: {
-        type: Array,
-        required: true
-      }
-    },
-    data(){
-        return{
-
-        }
-    },
-    methods: {
-      deleteNinja: function(){
-        this.ninjas.pop();
-      }
-    }
-}
-</script>
-<style scoped>
-#ninjas{
-    width: 100%;
-    max-width: 1200px;
-    margin: 40px auto;
-    padding: 0 20px;
-    box-sizing: border-box;
-}
-ul{
-    display: flex;
-    flex-wrap: wrap;
-    list-style-type: none;
-    padding: 0;
-}
-li{
-    flex-grow: 1;
-    flex-basis: 300px;
-    text-align: center;
-    padding: 30px;
-    border: 1px solid #222;
-    margin: 10px;
-}
-</style>
diff --git a/src/components/formHelper.vue b/src/components/formHelper.vue
new file mode 100644
index 0000000..fe8f6c0
--- /dev/null
+++ b/src/components/formHelper.vue
@@ -0,0 +1,69 @@
+<template>
+    <div>
+    <h1>Please fill out our form...</h1>
+        <form>
+            <div id="form-header">
+                <slot name="form-header"></slot>
+            </div>
+            <div id="form-fields">
+                <slot name="form-fields"></slot>
+            </div>
+            <div id="form-controls">
+                <slot name="form-controls"></slot>
+            </div>
+            <div id="useful-links">
+                <ul>
+                    <li><a href="#">link 1</a></li>
+                    <li><a href="#">link 2</a></li>
+                    <li><a href="#">link 3</a></li>
+                    <li><a href="#">link 4</a></li>
+                </ul>
+            </div>
+        </form>
+    </div>
+</template>
+
+<script>
+// Imports
+
+export default {
+    components: {
+
+    },
+    data () {
+        return {
+
+        }
+    },
+    methods: {
+
+    }
+}
+</script>
+
+<style scoped>
+h1{
+    text-align: center;
+}
+form{
+    width: 100%;
+    max-width: 960px;
+    margin: 0 auto;
+}
+#useful-links ul{
+    padding: 0;
+}
+#useful-links li{
+    display: inline-block;
+    margin-right: 10px;
+}
+form > div{
+    padding: 20px;
+    background: #eee;
+    margin: 20px 0;
+}
+#form-header{
+    background: #ddd;
+    border: 1px solid #bbb;
+}
+</style>
diff --git a/src/main.js b/src/main.js
index c3bc030..385fcfe 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,8 +1,6 @@
 import Vue from 'vue'
 import App from './App.vue'
 
-export const bus = new Vue();
-
 new Vue({
   el: '#app',
   render: h => h(App)

From 89bedc6bf9eeea1d5804992d29c295eef1bb0163 Mon Sep 17 00:00:00 2001
From: Shaun Pelling <shaunjp@shaun-pelling.com>
Date: Mon, 3 Apr 2017 10:23:54 +0100
Subject: [PATCH 04/18] added lesson 28 code

---
 src/App.vue                | 26 +++++++++------------
 src/components/formOne.vue | 46 ++++++++++++++++++++++++++++++++++++++
 src/components/formTwo.vue | 45 +++++++++++++++++++++++++++++++++++++
 3 files changed, 101 insertions(+), 16 deletions(-)
 create mode 100644 src/components/formOne.vue
 create mode 100644 src/components/formTwo.vue

diff --git a/src/App.vue b/src/App.vue
index e59cd31..f2bcf25 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,32 +1,26 @@
 <template>
     <div>
-        <form-helper>
-            <div slot="form-header">
-                <h3>This is the title of a form</h3>
-                <p>This is some info about the form</p>
-            </div>
-            <div slot="form-fields">
-                <input type="text" placeholder="name" required />
-                <input type="password" placeholder="password" required />
-            </div>
-            <div slot="form-controls">
-                <button v-on:click="handleSubmit">Submit</button>
-            </div>
-        </form-helper>
+        <keep-alive>
+            <component v-bind:is="component"></component>
+        </keep-alive>
+        <button v-on:click="component = 'form-one'">Show form one</button>
+        <button v-on:click="component = 'form-two'">Show form two</button>
     </div>
 </template>
 
 <script>
 // Imports
-import formHelper from './components/formHelper.vue'
+import formOne from './components/formOne.vue';
+import formTwo from './components/formTwo.vue';
 
 export default {
     components: {
-        'form-helper': formHelper
+        'form-one': formOne,
+        'form-two': formTwo
     },
     data () {
         return {
-
+            component: 'form-one'
         }
     },
     methods: {
diff --git a/src/components/formOne.vue b/src/components/formOne.vue
new file mode 100644
index 0000000..67a45f7
--- /dev/null
+++ b/src/components/formOne.vue
@@ -0,0 +1,46 @@
+<template>
+    <div>
+        <form-helper>
+            <div slot="form-header">
+                <h3>Form One - Contact Us</h3>
+                <p>Fill in this form to contact us</p>
+            </div>
+            <div slot="form-fields">
+                <input type="text" placeholder="name" required />
+                <label>Your Message:</label>
+                <textarea></textarea>
+            </div>
+            <div slot="form-controls">
+                <button v-on:click="handleSubmit">Send</button>
+            </div>
+        </form-helper>
+    </div>
+</template>
+
+<script>
+// Imports
+import formHelper from './formHelper.vue'
+
+export default {
+    components: {
+        'form-helper': formHelper
+    },
+    data () {
+        return {
+
+        }
+    },
+    methods: {
+        handleSubmit: function(){
+            alert('thanks for submitting form one & contacting us');
+        }
+    }
+}
+</script>
+
+<style>
+body{
+    margin: 0;
+    font-family: 'Nunito SemiBold';
+}
+</style>
diff --git a/src/components/formTwo.vue b/src/components/formTwo.vue
new file mode 100644
index 0000000..5cff7e0
--- /dev/null
+++ b/src/components/formTwo.vue
@@ -0,0 +1,45 @@
+<template>
+    <div>
+        <form-helper>
+            <div slot="form-header">
+                <h3>Form Two - Log In</h3>
+                <p>Enter your details to log-in</p>
+            </div>
+            <div slot="form-fields">
+                <input type="text" placeholder="username" required />
+                <input type="password" placeholder="password" required />
+            </div>
+            <div slot="form-controls">
+                <button v-on:click="handleSubmit">Login</button>
+            </div>
+        </form-helper>
+    </div>
+</template>
+
+<script>
+// Imports
+import formHelper from './formHelper.vue'
+
+export default {
+    components: {
+        'form-helper': formHelper
+    },
+    data () {
+        return {
+
+        }
+    },
+    methods: {
+        handleSubmit: function(){
+            alert('thanks for logging in (form two)');
+        }
+    }
+}
+</script>
+
+<style>
+body{
+    margin: 0;
+    font-family: 'Nunito SemiBold';
+}
+</style>

From f707e868fa65316c81dedc5d2afc3193b94a80a2 Mon Sep 17 00:00:00 2001
From: Shaun Pelling <shaunjp@shaun-pelling.com>
Date: Mon, 3 Apr 2017 11:04:31 +0100
Subject: [PATCH 05/18] added lesson 29 code

---
 src/App.vue                   | 18 +++------
 src/components/addBlog.vue    | 62 +++++++++++++++++++++++++++++++
 src/components/formHelper.vue | 69 -----------------------------------
 src/components/formOne.vue    | 46 -----------------------
 src/components/formTwo.vue    | 45 -----------------------
 5 files changed, 67 insertions(+), 173 deletions(-)
 create mode 100644 src/components/addBlog.vue
 delete mode 100644 src/components/formHelper.vue
 delete mode 100644 src/components/formOne.vue
 delete mode 100644 src/components/formTwo.vue

diff --git a/src/App.vue b/src/App.vue
index f2bcf25..3534b02 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,32 +1,24 @@
 <template>
     <div>
-        <keep-alive>
-            <component v-bind:is="component"></component>
-        </keep-alive>
-        <button v-on:click="component = 'form-one'">Show form one</button>
-        <button v-on:click="component = 'form-two'">Show form two</button>
+        <add-blog></add-blog>
     </div>
 </template>
 
 <script>
 // Imports
-import formOne from './components/formOne.vue';
-import formTwo from './components/formTwo.vue';
+import addBlog from './components/addBlog.vue';
 
 export default {
     components: {
-        'form-one': formOne,
-        'form-two': formTwo
+        'add-blog': addBlog
     },
     data () {
         return {
-            component: 'form-one'
+
         }
     },
     methods: {
-        handleSubmit: function(){
-            alert('thanks for submitting');
-        }
+
     }
 }
 </script>
diff --git a/src/components/addBlog.vue b/src/components/addBlog.vue
new file mode 100644
index 0000000..feda936
--- /dev/null
+++ b/src/components/addBlog.vue
@@ -0,0 +1,62 @@
+<template>
+    <div id="add-blog">
+        <h2>Add a New Blog Post</h2>
+        <form>
+            <label>Blog Title:</label>
+            <input type="text" v-model="blog.title" required />
+            <label>Blog Content:</label>
+            <textarea v-model="blog.content"></textarea>
+        </form>
+        <div id="preview">
+            <h3>Preview blog</h3>
+            <p>Blog title: {{ blog.title }}</p>
+            <p>Blog content:</p>
+            <p style="white-space: pre">{{ blog.content }}</p>
+        </div>
+    </div>
+</template>
+
+<script>
+// Imports
+
+export default {
+    data () {
+        return {
+            blog: {
+                title: '',
+                content: ''
+            }
+        }
+    },
+    methods: {
+
+    }
+}
+</script>
+
+<style>
+#add-blog *{
+    box-sizing: border-box;
+}
+#add-blog{
+    margin: 20px auto;
+    max-width: 500px;
+}
+label{
+    display: block;
+    margin: 20px 0 10px;
+}
+input[type="text"], textarea{
+    display: block;
+    width: 100%;
+    padding: 8px;
+}
+#preview{
+    padding: 10px 20px;
+    border: 1px dotted #ccc;
+    margin: 30px 0;
+}
+h3{
+    margin-top: 10px;
+}
+</style>
diff --git a/src/components/formHelper.vue b/src/components/formHelper.vue
deleted file mode 100644
index fe8f6c0..0000000
--- a/src/components/formHelper.vue
+++ /dev/null
@@ -1,69 +0,0 @@
-<template>
-    <div>
-    <h1>Please fill out our form...</h1>
-        <form>
-            <div id="form-header">
-                <slot name="form-header"></slot>
-            </div>
-            <div id="form-fields">
-                <slot name="form-fields"></slot>
-            </div>
-            <div id="form-controls">
-                <slot name="form-controls"></slot>
-            </div>
-            <div id="useful-links">
-                <ul>
-                    <li><a href="#">link 1</a></li>
-                    <li><a href="#">link 2</a></li>
-                    <li><a href="#">link 3</a></li>
-                    <li><a href="#">link 4</a></li>
-                </ul>
-            </div>
-        </form>
-    </div>
-</template>
-
-<script>
-// Imports
-
-export default {
-    components: {
-
-    },
-    data () {
-        return {
-
-        }
-    },
-    methods: {
-
-    }
-}
-</script>
-
-<style scoped>
-h1{
-    text-align: center;
-}
-form{
-    width: 100%;
-    max-width: 960px;
-    margin: 0 auto;
-}
-#useful-links ul{
-    padding: 0;
-}
-#useful-links li{
-    display: inline-block;
-    margin-right: 10px;
-}
-form > div{
-    padding: 20px;
-    background: #eee;
-    margin: 20px 0;
-}
-#form-header{
-    background: #ddd;
-    border: 1px solid #bbb;
-}
-</style>
diff --git a/src/components/formOne.vue b/src/components/formOne.vue
deleted file mode 100644
index 67a45f7..0000000
--- a/src/components/formOne.vue
+++ /dev/null
@@ -1,46 +0,0 @@
-<template>
-    <div>
-        <form-helper>
-            <div slot="form-header">
-                <h3>Form One - Contact Us</h3>
-                <p>Fill in this form to contact us</p>
-            </div>
-            <div slot="form-fields">
-                <input type="text" placeholder="name" required />
-                <label>Your Message:</label>
-                <textarea></textarea>
-            </div>
-            <div slot="form-controls">
-                <button v-on:click="handleSubmit">Send</button>
-            </div>
-        </form-helper>
-    </div>
-</template>
-
-<script>
-// Imports
-import formHelper from './formHelper.vue'
-
-export default {
-    components: {
-        'form-helper': formHelper
-    },
-    data () {
-        return {
-
-        }
-    },
-    methods: {
-        handleSubmit: function(){
-            alert('thanks for submitting form one & contacting us');
-        }
-    }
-}
-</script>
-
-<style>
-body{
-    margin: 0;
-    font-family: 'Nunito SemiBold';
-}
-</style>
diff --git a/src/components/formTwo.vue b/src/components/formTwo.vue
deleted file mode 100644
index 5cff7e0..0000000
--- a/src/components/formTwo.vue
+++ /dev/null
@@ -1,45 +0,0 @@
-<template>
-    <div>
-        <form-helper>
-            <div slot="form-header">
-                <h3>Form Two - Log In</h3>
-                <p>Enter your details to log-in</p>
-            </div>
-            <div slot="form-fields">
-                <input type="text" placeholder="username" required />
-                <input type="password" placeholder="password" required />
-            </div>
-            <div slot="form-controls">
-                <button v-on:click="handleSubmit">Login</button>
-            </div>
-        </form-helper>
-    </div>
-</template>
-
-<script>
-// Imports
-import formHelper from './formHelper.vue'
-
-export default {
-    components: {
-        'form-helper': formHelper
-    },
-    data () {
-        return {
-
-        }
-    },
-    methods: {
-        handleSubmit: function(){
-            alert('thanks for logging in (form two)');
-        }
-    }
-}
-</script>
-
-<style>
-body{
-    margin: 0;
-    font-family: 'Nunito SemiBold';
-}
-</style>

From 158c041cc26538ee9d0bae8bb9a1a73e79c0996e Mon Sep 17 00:00:00 2001
From: Shaun Pelling <shaunjp@shaun-pelling.com>
Date: Mon, 3 Apr 2017 11:42:41 +0100
Subject: [PATCH 06/18] added lesson 30 code

---
 src/components/addBlog.vue | 29 ++++++++++++++++++++++++++---
 1 file changed, 26 insertions(+), 3 deletions(-)

diff --git a/src/components/addBlog.vue b/src/components/addBlog.vue
index feda936..cf65552 100644
--- a/src/components/addBlog.vue
+++ b/src/components/addBlog.vue
@@ -3,15 +3,30 @@
         <h2>Add a New Blog Post</h2>
         <form>
             <label>Blog Title:</label>
-            <input type="text" v-model="blog.title" required />
+            <input type="text" v-model.lazy="blog.title" required />
             <label>Blog Content:</label>
-            <textarea v-model="blog.content"></textarea>
+            <textarea v-model.lazy.trim="blog.content"></textarea>
+            <div id="checkboxes">
+                <p>Blog Categories:</p>
+                <label>Ninjas</label>
+                <input type="checkbox" value="ninjas" v-model="blog.categories" />
+                <label>Wizards</label>
+                <input type="checkbox" value="wizards" v-model="blog.categories" />
+                <label>Mario</label>
+                <input type="checkbox" value="mario" v-model="blog.categories" />
+                <label>Cheese</label>
+                <input type="checkbox" value="cheese" v-model="blog.categories" />
+            </div>
         </form>
         <div id="preview">
             <h3>Preview blog</h3>
             <p>Blog title: {{ blog.title }}</p>
             <p>Blog content:</p>
             <p style="white-space: pre">{{ blog.content }}</p>
+            <p>Blog Categories:</p>
+            <ul>
+                <li v-for="category in blog.categories">{{ category }}</li>
+            </ul>
         </div>
     </div>
 </template>
@@ -24,7 +39,8 @@ export default {
         return {
             blog: {
                 title: '',
-                content: ''
+                content: '',
+                categories: []
             }
         }
     },
@@ -59,4 +75,11 @@ input[type="text"], textarea{
 h3{
     margin-top: 10px;
 }
+#checkboxes input{
+    display: inline-block;
+    margin-right: 10px;
+}
+#checkboxes label{
+    display: inline-block;
+}
 </style>

From c3e1b4b6145a9c1ba260d8d3919c66a53d7a8ab4 Mon Sep 17 00:00:00 2001
From: Shaun Pelling <shaunjp@shaun-pelling.com>
Date: Mon, 3 Apr 2017 11:53:40 +0100
Subject: [PATCH 07/18] added lesson 31 code

---
 src/components/addBlog.vue | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/components/addBlog.vue b/src/components/addBlog.vue
index cf65552..c6f8374 100644
--- a/src/components/addBlog.vue
+++ b/src/components/addBlog.vue
@@ -17,6 +17,10 @@
                 <label>Cheese</label>
                 <input type="checkbox" value="cheese" v-model="blog.categories" />
             </div>
+            <label>Author:</label>
+            <select v-model="blog.author">
+                <option v-for="author in authors">{{ author }}</option>
+            </select>
         </form>
         <div id="preview">
             <h3>Preview blog</h3>
@@ -27,6 +31,7 @@
             <ul>
                 <li v-for="category in blog.categories">{{ category }}</li>
             </ul>
+            <p>Author: {{ blog.author }}</p>
         </div>
     </div>
 </template>
@@ -40,8 +45,10 @@ export default {
             blog: {
                 title: '',
                 content: '',
-                categories: []
-            }
+                categories: [],
+                author: ''
+            },
+            authors: ['The Net Ninja', 'The Angular Avenger', 'The Vue Vindicator']
         }
     },
     methods: {
@@ -81,5 +88,6 @@ h3{
 }
 #checkboxes label{
     display: inline-block;
+    margin-top: 0;
 }
 </style>

From 10c64db91d4d92dad366d20508e78c74620202cb Mon Sep 17 00:00:00 2001
From: Shaun Pelling <shaunjp@shaun-pelling.com>
Date: Mon, 3 Apr 2017 13:13:47 +0100
Subject: [PATCH 08/18] added lesson 32 code

---
 package.json               |  3 ++-
 src/components/addBlog.vue | 21 ++++++++++++++++++---
 src/main.js                |  4 ++++
 3 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/package.json b/package.json
index 3d646ac..429542f 100644
--- a/package.json
+++ b/package.json
@@ -9,7 +9,8 @@
     "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
   },
   "dependencies": {
-    "vue": "^2.2.1"
+    "vue": "^2.2.1",
+    "vue-resource": "^1.2.1"
   },
   "devDependencies": {
     "babel-core": "^6.0.0",
diff --git a/src/components/addBlog.vue b/src/components/addBlog.vue
index c6f8374..3bf54b2 100644
--- a/src/components/addBlog.vue
+++ b/src/components/addBlog.vue
@@ -1,7 +1,7 @@
 <template>
     <div id="add-blog">
         <h2>Add a New Blog Post</h2>
-        <form>
+        <form v-if="!submitted">
             <label>Blog Title:</label>
             <input type="text" v-model.lazy="blog.title" required />
             <label>Blog Content:</label>
@@ -21,7 +21,12 @@
             <select v-model="blog.author">
                 <option v-for="author in authors">{{ author }}</option>
             </select>
+            <hr />
+            <button v-on:click.prevent="post">Add Blog</button>
         </form>
+        <div v-if="submitted">
+            <h3>Thanks for adding your post</h3>
+        </div>
         <div id="preview">
             <h3>Preview blog</h3>
             <p>Blog title: {{ blog.title }}</p>
@@ -48,11 +53,21 @@ export default {
                 categories: [],
                 author: ''
             },
-            authors: ['The Net Ninja', 'The Angular Avenger', 'The Vue Vindicator']
+            authors: ['The Net Ninja', 'The Angular Avenger', 'The Vue Vindicator'],
+            submitted: false
         }
     },
     methods: {
-
+        post: function(){
+            this.$http.post('http://jsonplaceholder.typicode.com/posts', {
+                title: this.blog.title,
+                body: this.blog.content,
+                userId: 1
+            }).then(function(data){
+                console.log(data);
+                this.submitted = true;
+            });
+        }
     }
 }
 </script>
diff --git a/src/main.js b/src/main.js
index 385fcfe..0d277b5 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,6 +1,10 @@
 import Vue from 'vue'
+import VueResource from 'vue-resource'
 import App from './App.vue'
 
+// Use vue-resource package
+Vue.use(VueResource);
+
 new Vue({
   el: '#app',
   render: h => h(App)

From 476cb4a05123bd606d061602b319a95ac703bdff Mon Sep 17 00:00:00 2001
From: Shaun Pelling <shaunjp@shaun-pelling.com>
Date: Mon, 3 Apr 2017 13:27:58 +0100
Subject: [PATCH 09/18] added lesson 33 code

---
 src/App.vue                  |  6 +++---
 src/components/showBlogs.vue | 40 ++++++++++++++++++++++++++++++++++++
 2 files changed, 43 insertions(+), 3 deletions(-)
 create mode 100644 src/components/showBlogs.vue

diff --git a/src/App.vue b/src/App.vue
index 3534b02..10181de 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,16 +1,16 @@
 <template>
     <div>
-        <add-blog></add-blog>
+        <show-blogs></show-blogs>
     </div>
 </template>
 
 <script>
 // Imports
-import addBlog from './components/addBlog.vue';
+import showBlogs from './components/showBlogs.vue';
 
 export default {
     components: {
-        'add-blog': addBlog
+        'show-blogs': showBlogs
     },
     data () {
         return {
diff --git a/src/components/showBlogs.vue b/src/components/showBlogs.vue
new file mode 100644
index 0000000..7a00b67
--- /dev/null
+++ b/src/components/showBlogs.vue
@@ -0,0 +1,40 @@
+<template>
+    <div id="show-blogs">
+        <h1>All Blog Articles</h1>
+        <div v-for="blog in blogs" class="single-blog">
+            <h2>{{ blog.title }}</h2>
+            <article>{{ blog.body }}</article>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data () {
+        return {
+            blogs: []
+        }
+    },
+    methods: {
+
+    },
+    created() {
+        this.$http.get('http://jsonplaceholder.typicode.com/posts').then(function(data){
+            this.blogs = data.body.slice(0,10);
+        });
+    }
+}
+</script>
+
+<style>
+#show-blogs{
+    max-width: 800px;
+    margin: 0px auto;
+}
+.single-blog{
+    padding: 20px;
+    margin: 20px 0;
+    box-sizing: border-box;
+    background: #eee;
+}
+</style>

From 14aa9abf8a55d30614982867a4484705013d4922 Mon Sep 17 00:00:00 2001
From: Shaun Pelling <shaunjp@shaun-pelling.com>
Date: Mon, 3 Apr 2017 14:16:10 +0100
Subject: [PATCH 10/18] added lesson 34 code

---
 src/components/showBlogs.vue |  4 ++--
 src/main.js                  | 21 +++++++++++++++++++++
 2 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/src/components/showBlogs.vue b/src/components/showBlogs.vue
index 7a00b67..1f5c456 100644
--- a/src/components/showBlogs.vue
+++ b/src/components/showBlogs.vue
@@ -1,8 +1,8 @@
 <template>
-    <div id="show-blogs">
+    <div v-theme:column="'narrow'" id="show-blogs">
         <h1>All Blog Articles</h1>
         <div v-for="blog in blogs" class="single-blog">
-            <h2>{{ blog.title }}</h2>
+            <h2 v-rainbow>{{ blog.title }}</h2>
             <article>{{ blog.body }}</article>
         </div>
     </div>
diff --git a/src/main.js b/src/main.js
index 0d277b5..e9fb8f5 100644
--- a/src/main.js
+++ b/src/main.js
@@ -5,6 +5,27 @@ import App from './App.vue'
 // Use vue-resource package
 Vue.use(VueResource);
 
+// Custom directives
+Vue.directive('rainbow', {
+    bind(el, binding, vnode){
+        el.style.color = "#" + Math.random().toString(16).slice(2, 8);
+    }
+});
+
+Vue.directive('theme', {
+    bind(el, binding, vnode){
+        if (binding.value == 'wide'){
+            el.style.maxWidth = "1260px";
+        } else if (binding.value = 'narrow'){
+            el.style.maxWidth = "560px";
+        }
+        if(binding.arg == 'column'){
+            el.style.background = '#ddd';
+            el.style.padding = '20px';
+        }
+    }
+});
+
 new Vue({
   el: '#app',
   render: h => h(App)

From 8518562a557bf1ddfde6e0ccec73fec3adc43ee6 Mon Sep 17 00:00:00 2001
From: Shaun Pelling <shaunjp@shaun-pelling.com>
Date: Mon, 3 Apr 2017 14:46:12 +0100
Subject: [PATCH 11/18] added lesson 35 code

---
 src/components/showBlogs.vue |  4 ++--
 src/main.js                  | 22 +++-------------------
 2 files changed, 5 insertions(+), 21 deletions(-)

diff --git a/src/components/showBlogs.vue b/src/components/showBlogs.vue
index 1f5c456..740b051 100644
--- a/src/components/showBlogs.vue
+++ b/src/components/showBlogs.vue
@@ -1,8 +1,8 @@
 <template>
-    <div v-theme:column="'narrow'" id="show-blogs">
+    <div id="show-blogs">
         <h1>All Blog Articles</h1>
         <div v-for="blog in blogs" class="single-blog">
-            <h2 v-rainbow>{{ blog.title }}</h2>
+            <h2>{{ blog.title | to-uppercase }}</h2>
             <article>{{ blog.body }}</article>
         </div>
     </div>
diff --git a/src/main.js b/src/main.js
index e9fb8f5..408eb78 100644
--- a/src/main.js
+++ b/src/main.js
@@ -5,25 +5,9 @@ import App from './App.vue'
 // Use vue-resource package
 Vue.use(VueResource);
 
-// Custom directives
-Vue.directive('rainbow', {
-    bind(el, binding, vnode){
-        el.style.color = "#" + Math.random().toString(16).slice(2, 8);
-    }
-});
-
-Vue.directive('theme', {
-    bind(el, binding, vnode){
-        if (binding.value == 'wide'){
-            el.style.maxWidth = "1260px";
-        } else if (binding.value = 'narrow'){
-            el.style.maxWidth = "560px";
-        }
-        if(binding.arg == 'column'){
-            el.style.background = '#ddd';
-            el.style.padding = '20px';
-        }
-    }
+// Filters
+Vue.filter('to-uppercase', function(value){
+    return value.toUpperCase();
 });
 
 new Vue({

From 9c1c6a0b469917ee53653068fb16e2d61fe1e3bb Mon Sep 17 00:00:00 2001
From: Shaun Pelling <shaunjp@shaun-pelling.com>
Date: Mon, 3 Apr 2017 16:26:02 +0100
Subject: [PATCH 12/18] added lesson 36 code

---
 src/components/showBlogs.vue | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/components/showBlogs.vue b/src/components/showBlogs.vue
index 740b051..0fc5042 100644
--- a/src/components/showBlogs.vue
+++ b/src/components/showBlogs.vue
@@ -1,7 +1,8 @@
 <template>
     <div id="show-blogs">
         <h1>All Blog Articles</h1>
-        <div v-for="blog in blogs" class="single-blog">
+        <input type="text" v-model="search" placeholder="search blogs" />
+        <div v-for="blog in filteredBlogs" class="single-blog">
             <h2>{{ blog.title | to-uppercase }}</h2>
             <article>{{ blog.body }}</article>
         </div>
@@ -12,7 +13,8 @@
 export default {
     data () {
         return {
-            blogs: []
+            blogs: [],
+            search: ''
         }
     },
     methods: {
@@ -22,6 +24,13 @@ export default {
         this.$http.get('http://jsonplaceholder.typicode.com/posts').then(function(data){
             this.blogs = data.body.slice(0,10);
         });
+    },
+    computed: {
+        filteredBlogs: function(){
+            return this.blogs.filter((blog) => {
+                return blog.title.match(this.search);
+            });
+        }
     }
 }
 </script>

From 1b82e9d25b174fd8115b557a188dbdfb8890cfca Mon Sep 17 00:00:00 2001
From: Shaun Pelling <shaunjp@shaun-pelling.com>
Date: Mon, 3 Apr 2017 16:35:13 +0100
Subject: [PATCH 13/18] added lesson 37 code

---
 src/components/showBlogs.vue | 17 ++++++++++++++++-
 src/main.js                  |  3 ++-
 2 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/src/components/showBlogs.vue b/src/components/showBlogs.vue
index 0fc5042..8ae4d51 100644
--- a/src/components/showBlogs.vue
+++ b/src/components/showBlogs.vue
@@ -3,7 +3,7 @@
         <h1>All Blog Articles</h1>
         <input type="text" v-model="search" placeholder="search blogs" />
         <div v-for="blog in filteredBlogs" class="single-blog">
-            <h2>{{ blog.title | to-uppercase }}</h2>
+            <h2 v-rainbow>{{ blog.title | toUppercase }}</h2>
             <article>{{ blog.body }}</article>
         </div>
     </div>
@@ -31,6 +31,21 @@ export default {
                 return blog.title.match(this.search);
             });
         }
+    },
+    filters: {
+        /*'to-uppercase': function(value){
+            return value.toUpperCase();
+        }*/
+        toUppercase(value){
+            return value.toUpperCase();
+        }
+    },
+    directives: {
+        'rainbow' :{
+            bind(el, binding, vnode){
+                el.style.color = "#" + Math.random().toString(16).slice(2, 8);
+            }
+        }
     }
 }
 </script>
diff --git a/src/main.js b/src/main.js
index 408eb78..5728941 100644
--- a/src/main.js
+++ b/src/main.js
@@ -6,9 +6,10 @@ import App from './App.vue'
 Vue.use(VueResource);
 
 // Filters
+/*
 Vue.filter('to-uppercase', function(value){
     return value.toUpperCase();
-});
+}); */
 
 new Vue({
   el: '#app',

From e53d0ecfd0ac4875b3b5f7194ec5d4be9404ec22 Mon Sep 17 00:00:00 2001
From: Shaun Pelling <shaunjp@shaun-pelling.com>
Date: Mon, 3 Apr 2017 16:55:59 +0100
Subject: [PATCH 14/18] added lesson 38 code

---
 src/App.vue                  |  5 ++++-
 src/components/listBlogs.vue | 42 ++++++++++++++++++++++++++++++++++++
 src/components/showBlogs.vue | 31 +++++---------------------
 src/main.js                  |  6 ------
 src/mixins/searchMixin.js    |  9 ++++++++
 5 files changed, 60 insertions(+), 33 deletions(-)
 create mode 100644 src/components/listBlogs.vue
 create mode 100644 src/mixins/searchMixin.js

diff --git a/src/App.vue b/src/App.vue
index 10181de..52fdcde 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,16 +1,19 @@
 <template>
     <div>
         <show-blogs></show-blogs>
+        <list-blogs></list-blogs>
     </div>
 </template>
 
 <script>
 // Imports
 import showBlogs from './components/showBlogs.vue';
+import listBlogs from './components/listBlogs.vue';
 
 export default {
     components: {
-        'show-blogs': showBlogs
+        'show-blogs': showBlogs,
+        'list-blogs': listBlogs
     },
     data () {
         return {
diff --git a/src/components/listBlogs.vue b/src/components/listBlogs.vue
new file mode 100644
index 0000000..a80f110
--- /dev/null
+++ b/src/components/listBlogs.vue
@@ -0,0 +1,42 @@
+<template>
+    <div id="show-blogs">
+        <h1>List Blog Titles</h1>
+        <input type="text" v-model="search" placeholder="search blogs" />
+        <div v-for="blog in filteredBlogs" class="single-blog">
+            <h2>{{ blog.title }}</h2>
+        </div>
+    </div>
+</template>
+
+<script>
+// Imports
+import searchMixin from '../mixins/searchMixin';
+
+export default {
+    data () {
+        return {
+            blogs: [],
+            search: ''
+        }
+    },
+    created() {
+        this.$http.get('http://jsonplaceholder.typicode.com/posts').then(function(data){
+            this.blogs = data.body.slice(0,10);
+        });
+    },
+    mixins: [searchMixin]
+}
+</script>
+
+<style>
+#show-blogs{
+    max-width: 800px;
+    margin: 0px auto;
+}
+.single-blog{
+    padding: 20px;
+    margin: 20px 0;
+    box-sizing: border-box;
+    background: #eee;
+}
+</style>
diff --git a/src/components/showBlogs.vue b/src/components/showBlogs.vue
index 8ae4d51..f9af5f3 100644
--- a/src/components/showBlogs.vue
+++ b/src/components/showBlogs.vue
@@ -3,50 +3,29 @@
         <h1>All Blog Articles</h1>
         <input type="text" v-model="search" placeholder="search blogs" />
         <div v-for="blog in filteredBlogs" class="single-blog">
-            <h2 v-rainbow>{{ blog.title | toUppercase }}</h2>
+            <h2>{{ blog.title }}</h2>
             <article>{{ blog.body }}</article>
         </div>
     </div>
 </template>
 
 <script>
+// Imports
+import searchMixin from '../mixins/searchMixin';
+
 export default {
     data () {
         return {
             blogs: [],
             search: ''
         }
-    },
-    methods: {
-
     },
     created() {
         this.$http.get('http://jsonplaceholder.typicode.com/posts').then(function(data){
             this.blogs = data.body.slice(0,10);
         });
     },
-    computed: {
-        filteredBlogs: function(){
-            return this.blogs.filter((blog) => {
-                return blog.title.match(this.search);
-            });
-        }
-    },
-    filters: {
-        /*'to-uppercase': function(value){
-            return value.toUpperCase();
-        }*/
-        toUppercase(value){
-            return value.toUpperCase();
-        }
-    },
-    directives: {
-        'rainbow' :{
-            bind(el, binding, vnode){
-                el.style.color = "#" + Math.random().toString(16).slice(2, 8);
-            }
-        }
-    }
+    mixins: [searchMixin]
 }
 </script>
 
diff --git a/src/main.js b/src/main.js
index 5728941..0d277b5 100644
--- a/src/main.js
+++ b/src/main.js
@@ -5,12 +5,6 @@ import App from './App.vue'
 // Use vue-resource package
 Vue.use(VueResource);
 
-// Filters
-/*
-Vue.filter('to-uppercase', function(value){
-    return value.toUpperCase();
-}); */
-
 new Vue({
   el: '#app',
   render: h => h(App)
diff --git a/src/mixins/searchMixin.js b/src/mixins/searchMixin.js
new file mode 100644
index 0000000..6d62786
--- /dev/null
+++ b/src/mixins/searchMixin.js
@@ -0,0 +1,9 @@
+export default {
+    computed: {
+        filteredBlogs: function(){
+            return this.blogs.filter((blog) => {
+                return blog.title.match(this.search);
+            });
+        }
+    }
+};

From 97b22023b76907b0df5e32ff0ef302da08c30b84 Mon Sep 17 00:00:00 2001
From: Shaun Pelling <shaunjp@shaun-pelling.com>
Date: Mon, 3 Apr 2017 17:21:17 +0100
Subject: [PATCH 15/18] added code

---
 package.json               |  3 ++-
 src/App.vue                |  3 +--
 src/components/addBlog.vue |  2 +-
 src/main.js                | 13 +++++++++++--
 src/routes.js              |  7 +++++++
 5 files changed, 22 insertions(+), 6 deletions(-)
 create mode 100644 src/routes.js

diff --git a/package.json b/package.json
index 429542f..2d2214a 100644
--- a/package.json
+++ b/package.json
@@ -10,7 +10,8 @@
   },
   "dependencies": {
     "vue": "^2.2.1",
-    "vue-resource": "^1.2.1"
+    "vue-resource": "^1.2.1",
+    "vue-router": "^2.3.1"
   },
   "devDependencies": {
     "babel-core": "^6.0.0",
diff --git a/src/App.vue b/src/App.vue
index 52fdcde..0fd3c78 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,7 +1,6 @@
 <template>
     <div>
-        <show-blogs></show-blogs>
-        <list-blogs></list-blogs>
+        <router-view></router-view>
     </div>
 </template>
 
diff --git a/src/components/addBlog.vue b/src/components/addBlog.vue
index 3bf54b2..4a107dd 100644
--- a/src/components/addBlog.vue
+++ b/src/components/addBlog.vue
@@ -72,7 +72,7 @@ export default {
 }
 </script>
 
-<style>
+<style scoped>
 #add-blog *{
     box-sizing: border-box;
 }
diff --git a/src/main.js b/src/main.js
index 0d277b5..955a829 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,11 +1,20 @@
 import Vue from 'vue'
 import VueResource from 'vue-resource'
+import VueRouter from 'vue-router'
 import App from './App.vue'
+import Routes from './routes'
 
-// Use vue-resource package
+// Use packages
 Vue.use(VueResource);
+Vue.use(VueRouter);
+
+// Register routes
+const router = new VueRouter({
+    routes: Routes
+});
 
 new Vue({
   el: '#app',
-  render: h => h(App)
+  render: h => h(App),
+  router: router
 })
diff --git a/src/routes.js b/src/routes.js
new file mode 100644
index 0000000..4508680
--- /dev/null
+++ b/src/routes.js
@@ -0,0 +1,7 @@
+import addBlog from './components/addBlog.vue';
+import showBlogs from './components/showBlogs.vue';
+
+export default [
+    { path: '/', component: showBlogs},
+    { path: '/add', component: addBlog}
+]

From c4adbaa68bf62a2eeaf62b8de285f308a9093ce7 Mon Sep 17 00:00:00 2001
From: Shaun Pelling <shaunjp@shaun-pelling.com>
Date: Mon, 3 Apr 2017 17:26:48 +0100
Subject: [PATCH 16/18] added lesson 40 code

---
 src/main.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/main.js b/src/main.js
index 955a829..b1f23aa 100644
--- a/src/main.js
+++ b/src/main.js
@@ -10,7 +10,8 @@ Vue.use(VueRouter);
 
 // Register routes
 const router = new VueRouter({
-    routes: Routes
+    routes: Routes,
+    mode: 'history'
 });
 
 new Vue({

From f77eb4d4c93108c5b0d66b773d70b90411c01002 Mon Sep 17 00:00:00 2001
From: Shaun Pelling <shaunjp@shaun-pelling.com>
Date: Mon, 3 Apr 2017 17:41:36 +0100
Subject: [PATCH 17/18] added lesson 41 code

---
 src/App.vue               |  5 +++--
 src/components/header.vue | 39 +++++++++++++++++++++++++++++++++++++++
 2 files changed, 42 insertions(+), 2 deletions(-)
 create mode 100644 src/components/header.vue

diff --git a/src/App.vue b/src/App.vue
index 0fd3c78..bfb1353 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,6 @@
 <template>
     <div>
+        <app-header></app-header>
         <router-view></router-view>
     </div>
 </template>
@@ -8,11 +9,11 @@
 // Imports
 import showBlogs from './components/showBlogs.vue';
 import listBlogs from './components/listBlogs.vue';
+import header from './components/header.vue';
 
 export default {
     components: {
-        'show-blogs': showBlogs,
-        'list-blogs': listBlogs
+        'app-header': header
     },
     data () {
         return {
diff --git a/src/components/header.vue b/src/components/header.vue
new file mode 100644
index 0000000..9cf48f0
--- /dev/null
+++ b/src/components/header.vue
@@ -0,0 +1,39 @@
+<template>
+    <nav>
+        <ul>
+            <li><router-link to="/" exact>Blog</router-link></li>
+            <li><router-link to="/add" exact>Add a new blog</router-link></li>
+        </ul>
+    </nav>
+</template>
+
+<script>
+export default {}
+</script>
+
+<style scoped>
+ul{
+    list-style-type: none;
+    text-align: center;
+    margin: 0;
+}
+li{
+    display: inline-block;
+    margin: 0 10px;
+}
+a{
+    color: #fff;
+    text-decoration: none;
+    padding: 6px 8px;
+    border-radius: 10px;
+}
+nav{
+    background: #444;
+    padding: 14px 0;
+    margin-bottom: 40px;
+}
+.router-link-active{
+    background: #eee;
+    color: #444;
+}
+</style>

From 10edba9efb39081b38e54e381cf3397eb30ae330 Mon Sep 17 00:00:00 2001
From: Shaun Pelling <shaunjp@shaun-pelling.com>
Date: Mon, 3 Apr 2017 17:55:10 +0100
Subject: [PATCH 18/18] added lesson 42 code

---
 src/components/showBlogs.vue  |  7 ++++++-
 src/components/singleBlog.vue | 34 ++++++++++++++++++++++++++++++++++
 src/routes.js                 |  4 +++-
 3 files changed, 43 insertions(+), 2 deletions(-)
 create mode 100644 src/components/singleBlog.vue

diff --git a/src/components/showBlogs.vue b/src/components/showBlogs.vue
index f9af5f3..8f980a7 100644
--- a/src/components/showBlogs.vue
+++ b/src/components/showBlogs.vue
@@ -3,7 +3,7 @@
         <h1>All Blog Articles</h1>
         <input type="text" v-model="search" placeholder="search blogs" />
         <div v-for="blog in filteredBlogs" class="single-blog">
-            <h2>{{ blog.title }}</h2>
+            <router-link v-bind:to="'/blog/' + blog.id"><h2>{{ blog.title }}</h2></router-link>
             <article>{{ blog.body }}</article>
         </div>
     </div>
@@ -40,4 +40,9 @@ export default {
     box-sizing: border-box;
     background: #eee;
 }
+
+#show-blogs a{
+    color: #444;
+    text-decoration: none;
+}
 </style>
diff --git a/src/components/singleBlog.vue b/src/components/singleBlog.vue
new file mode 100644
index 0000000..8e91155
--- /dev/null
+++ b/src/components/singleBlog.vue
@@ -0,0 +1,34 @@
+<template>
+    <div id="single-blog">
+        <h1>{{ blog.title }}</h1>
+        <article>{{ blog.body }}</article>
+        </div>
+    </div>
+</template>
+
+<script>
+// Imports
+import searchMixin from '../mixins/searchMixin';
+
+export default {
+    data () {
+        return {
+            id: this.$route.params.id,
+            blog: {}
+        }
+    },
+    created() {
+        this.$http.get('http://jsonplaceholder.typicode.com/posts/' + this.id).then(function(data){
+            // console.log(data);
+            this.blog = data.body;
+        });
+    }
+}
+</script>
+
+<style>
+#single-blog{
+    max-width: 960px;
+    margin: 0 auto;
+}
+</style>
diff --git a/src/routes.js b/src/routes.js
index 4508680..45b5c3d 100644
--- a/src/routes.js
+++ b/src/routes.js
@@ -1,7 +1,9 @@
 import addBlog from './components/addBlog.vue';
 import showBlogs from './components/showBlogs.vue';
+import singleBlog from './components/singleBlog.vue';
 
 export default [
     { path: '/', component: showBlogs},
-    { path: '/add', component: addBlog}
+    { path: '/add', component: addBlog},
+    { path: '/blog/:id', component: singleBlog}
 ]