From da257893c0a1ff7c6cf319e585ad4b3e22ca7dcd Mon Sep 17 00:00:00 2001
From: Kamau Cusaac <kcusaac@gmail.com>
Date: Sat, 10 Feb 2018 22:52:48 -0500
Subject: [PATCH 1/6] global nessted components

---
 src/App.vue    |  1 +
 src/Ninjas.vue | 21 +++++++++++++++++++++
 src/main.js    |  3 +++
 3 files changed, 25 insertions(+)
 create mode 100644 src/Ninjas.vue

diff --git a/src/App.vue b/src/App.vue
index bdbe827..3bdbcec 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,6 +1,7 @@
 <template>
   <div>
     <h1>{{title}}</h1>
+    <ninjas></ninjas>
     <p>{{greeting()}}</p>
   </div>
 </template>
diff --git a/src/Ninjas.vue b/src/Ninjas.vue
new file mode 100644
index 0000000..a873bfe
--- /dev/null
+++ b/src/Ninjas.vue
@@ -0,0 +1,21 @@
+<template>
+  <ul>
+    <li v-for="ninja in ninjas">{{ninja}}</li>
+  </ul>
+
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      ninjas: ['Yoshi', 'Mario','Ryu']
+    }
+  },
+
+}
+</script>
+
+<style>
+
+</style>
diff --git a/src/main.js b/src/main.js
index 385fcfe..35c1b52 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,5 +1,8 @@
 import Vue from 'vue'
 import App from './App.vue'
+import Ninjas from './Ninjas.vue'
+
+Vue.component('ninjas', Ninjas)
 
 new Vue({
   el: '#app',

From 8d7e0e65601b17d296dbd79c8820ca1aa9dabc80 Mon Sep 17 00:00:00 2001
From: Kamau Cusaac <kcusaac@gmail.com>
Date: Sat, 10 Feb 2018 23:02:37 -0500
Subject: [PATCH 2/6] nested components

---
 src/App.vue     |  8 ++++++--
 src/Ninjas2.vue | 21 +++++++++++++++++++++
 src/main.js     |  4 ++--
 3 files changed, 29 insertions(+), 4 deletions(-)
 create mode 100644 src/Ninjas2.vue

diff --git a/src/App.vue b/src/App.vue
index 3bdbcec..7430c72 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,14 +1,18 @@
 <template>
   <div>
     <h1>{{title}}</h1>
-    <ninjas></ninjas>
+    <ninjas></ninjas> <!-- Global nested component -->
+    <ninjas2></ninjas2> <!--local nested component -->
     <p>{{greeting()}}</p>
   </div>
 </template>
 
 <script>
+import Ninjas2 from './Ninjas2.vue' //local nested component
 export default {
-  name: 'app',
+  components:{
+    'ninjas2':Ninjas2 //local
+  },
   data () {
     return {
       title: 'Your first Vue file'
diff --git a/src/Ninjas2.vue b/src/Ninjas2.vue
new file mode 100644
index 0000000..a873bfe
--- /dev/null
+++ b/src/Ninjas2.vue
@@ -0,0 +1,21 @@
+<template>
+  <ul>
+    <li v-for="ninja in ninjas">{{ninja}}</li>
+  </ul>
+
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      ninjas: ['Yoshi', 'Mario','Ryu']
+    }
+  },
+
+}
+</script>
+
+<style>
+
+</style>
diff --git a/src/main.js b/src/main.js
index 35c1b52..4bdded9 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,8 +1,8 @@
 import Vue from 'vue'
 import App from './App.vue'
-import Ninjas from './Ninjas.vue'
+import Ninjas from './Ninjas.vue' //Global nested component
 
-Vue.component('ninjas', Ninjas)
+Vue.component('ninjas', Ninjas) //Global nested component
 
 new Vue({
   el: '#app',

From 9e6d5b31e7872646f416259a80a20b0a9d54c765 Mon Sep 17 00:00:00 2001
From: Kamau Cusaac <kcusaac@gmail.com>
Date: Sat, 10 Feb 2018 23:13:18 -0500
Subject: [PATCH 3/6] scoped css 20

---
 src/App.vue    |  5 ++++-
 src/Ninjas.vue | 10 +++++++---
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 7430c72..a0bf928 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -26,6 +26,9 @@ export default {
 }
 </script>
 
-<style>
+<style scoped>
+h1{
+  color:purple;
+}
 
 </style>
diff --git a/src/Ninjas.vue b/src/Ninjas.vue
index a873bfe..2f04e63 100644
--- a/src/Ninjas.vue
+++ b/src/Ninjas.vue
@@ -1,8 +1,10 @@
 <template>
+  <div>
+  <h1>List of Nijas</h1>
   <ul>
     <li v-for="ninja in ninjas">{{ninja}}</li>
   </ul>
-
+</div>
 </template>
 
 <script>
@@ -16,6 +18,8 @@ export default {
 }
 </script>
 
-<style>
-
+<style scoped>
+h1{
+  color:green
+}
 </style>

From beb07449f1fe88e6e281eb640203b7eb88c2e98f Mon Sep 17 00:00:00 2001
From: Kamau Cusaac <kcusaac@gmail.com>
Date: Sun, 11 Feb 2018 11:12:56 -0500
Subject: [PATCH 4/6] nested components 21

---
 src/App.vue               | 29 ++++++++++----------
 src/Ninjas.vue            | 25 -----------------
 src/Ninjas2.vue           | 21 ---------------
 src/components/Footer.vue | 29 ++++++++++++++++++++
 src/components/Header.vue | 28 +++++++++++++++++++
 src/components/Ninjas.vue | 57 +++++++++++++++++++++++++++++++++++++++
 src/main.js               |  4 +--
 7 files changed, 130 insertions(+), 63 deletions(-)
 delete mode 100644 src/Ninjas.vue
 delete mode 100644 src/Ninjas2.vue
 create mode 100644 src/components/Footer.vue
 create mode 100644 src/components/Header.vue
 create mode 100644 src/components/Ninjas.vue

diff --git a/src/App.vue b/src/App.vue
index a0bf928..93f085b 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,34 +1,33 @@
 <template>
   <div>
-    <h1>{{title}}</h1>
-    <ninjas></ninjas> <!-- Global nested component -->
-    <ninjas2></ninjas2> <!--local nested component -->
-    <p>{{greeting()}}</p>
+    <app-header></app-header>
+    <app-ninjas></app-ninjas>
+    <app-footer></app-footer>
+
   </div>
 </template>
 
 <script>
-import Ninjas2 from './Ninjas2.vue' //local nested component
+import Header from './components/Header.vue';
+import Footer from './components/Footer.vue';
+import Ninjas from './components/Ninjas.vue';
+
 export default {
   components:{
-    'ninjas2':Ninjas2 //local
+    'app-header': Header,
+    'app-footer': Footer,
+    'app-ninjas': Ninjas
   },
   data () {
     return {
-      title: 'Your first Vue file'
-    }
-  },
-  methods:{
-    greeting:function(){
-      return "hey"
+
     }
   }
 }
+
 </script>
 
 <style scoped>
-h1{
-  color:purple;
-}
+
 
 </style>
diff --git a/src/Ninjas.vue b/src/Ninjas.vue
deleted file mode 100644
index 2f04e63..0000000
--- a/src/Ninjas.vue
+++ /dev/null
@@ -1,25 +0,0 @@
-<template>
-  <div>
-  <h1>List of Nijas</h1>
-  <ul>
-    <li v-for="ninja in ninjas">{{ninja}}</li>
-  </ul>
-</div>
-</template>
-
-<script>
-export default {
-  data () {
-    return {
-      ninjas: ['Yoshi', 'Mario','Ryu']
-    }
-  },
-
-}
-</script>
-
-<style scoped>
-h1{
-  color:green
-}
-</style>
diff --git a/src/Ninjas2.vue b/src/Ninjas2.vue
deleted file mode 100644
index a873bfe..0000000
--- a/src/Ninjas2.vue
+++ /dev/null
@@ -1,21 +0,0 @@
-<template>
-  <ul>
-    <li v-for="ninja in ninjas">{{ninja}}</li>
-  </ul>
-
-</template>
-
-<script>
-export default {
-  data () {
-    return {
-      ninjas: ['Yoshi', 'Mario','Ryu']
-    }
-  },
-
-}
-</script>
-
-<style>
-
-</style>
diff --git a/src/components/Footer.vue b/src/components/Footer.vue
new file mode 100644
index 0000000..0929780
--- /dev/null
+++ b/src/components/Footer.vue
@@ -0,0 +1,29 @@
+<template>
+  <footer>
+    <p>{{copyright}}</p>
+  </footer>
+</template>
+
+<script>
+
+export default {
+  data () {
+    return {
+      copyright:"copyright 2017 Vue Ninjas"
+    }
+  }
+}
+
+</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
new file mode 100644
index 0000000..ba89b1f
--- /dev/null
+++ b/src/components/Header.vue
@@ -0,0 +1,28 @@
+<template>
+  <header>
+    <h1>{{ title }}</h1>
+  </header>
+</template>
+
+<script>
+
+export default {
+  data () {
+    return {
+      title: 'Vue Header'
+    }
+  }
+}
+
+</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
new file mode 100644
index 0000000..48b45c8
--- /dev/null
+++ b/src/components/Ninjas.vue
@@ -0,0 +1,57 @@
+<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>
+  </div>
+</template>
+
+<script>
+
+export default {
+  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}
+      ],
+    }
+  }
+}
+
+</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;
+}
+li:hover{
+  cursor:pointer;
+}
+</style>
diff --git a/src/main.js b/src/main.js
index 4bdded9..ce564c8 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,8 +1,8 @@
 import Vue from 'vue'
 import App from './App.vue'
-import Ninjas from './Ninjas.vue' //Global nested component
+//import Ninjas from './Ninjas.vue' //Global nested component
 
-Vue.component('ninjas', Ninjas) //Global nested component
+//Vue.component('ninjas', Ninjas) //Global nested component
 
 new Vue({
   el: '#app',

From 4137debdfe18d02651e0ce61d29cd27b86a2f223 Mon Sep 17 00:00:00 2001
From: Kamau Cusaac <kcusaac@gmail.com>
Date: Sun, 11 Feb 2018 11:23:48 -0500
Subject: [PATCH 5/6] props 22

---
 src/App.vue               | 11 +++++++++--
 src/components/Ninjas.vue | 23 +++++++++++++++--------
 2 files changed, 24 insertions(+), 10 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 93f085b..1e9ce37 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <app-header></app-header>
-    <app-ninjas></app-ninjas>
+    <app-ninjas v-bind:ninjas="ninjas"></app-ninjas>
     <app-footer></app-footer>
 
   </div>
@@ -20,7 +20,14 @@ export default {
   },
   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}
+      ],
     }
   }
 }
diff --git a/src/components/Ninjas.vue b/src/components/Ninjas.vue
index 48b45c8..08f5f41 100644
--- a/src/components/Ninjas.vue
+++ b/src/components/Ninjas.vue
@@ -13,16 +13,23 @@
 <script>
 
 export default {
+  //props: ['ninjas'],
+  props:{
+    ninjas:{
+      type:Array,
+      required:true
+    }
+  },
   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}
-      ],
+      // 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}
+      // ],
     }
   }
 }

From f976d3931123f47365051913c2b39f1415de1ad0 Mon Sep 17 00:00:00 2001
From: Kamau Cusaac <kcusaac@gmail.com>
Date: Mon, 12 Feb 2018 18:32:10 -0500
Subject: [PATCH 6/6] event 24

---
 package-lock.json         | 393 +++++++++++++++++++++++++++++++++++---
 package.json              |   1 +
 src/App.vue               |  64 ++++---
 src/components/Footer.vue |  32 ++--
 src/components/Header.vue |  42 ++--
 src/components/Ninjas.vue |   8 +-
 6 files changed, 447 insertions(+), 93 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 8805bff..3025150 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -72,6 +72,11 @@
       "integrity": "sha1-l6ERlkmyEa0zaR2fn0hqjsn74KM=",
       "dev": true
     },
+    "amdefine": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/amdefine/-/amdefine-1.0.1.tgz",
+      "integrity": "sha1-SlKCrBZHKek2Gbz9OtFR+BfOkfU="
+    },
     "ansi-html": {
       "version": "0.0.7",
       "resolved": "https://registry.npmjs.org/ansi-html/-/ansi-html-0.0.7.tgz",
@@ -220,6 +225,22 @@
       "integrity": "sha1-GcenYEc3dEaPILLS0DNyrX1Mv10=",
       "dev": true
     },
+    "atom-vue-component-compiler": {
+      "version": "0.0.4",
+      "resolved": "https://registry.npmjs.org/atom-vue-component-compiler/-/atom-vue-component-compiler-0.0.4.tgz",
+      "integrity": "sha1-ttpHaRmH/zavDTGEmjujLiAxK5A=",
+      "requires": {
+        "bluebird": "2.11.0",
+        "vue-component-compiler": "1.1.12"
+      },
+      "dependencies": {
+        "bluebird": {
+          "version": "2.11.0",
+          "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-2.11.0.tgz",
+          "integrity": "sha1-U0uQM8AiyVecVro7Plpcqvu2UOE="
+        }
+      }
+    },
     "autoprefixer": {
       "version": "6.7.7",
       "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-6.7.7.tgz",
@@ -919,8 +940,7 @@
     "balanced-match": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
-      "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=",
-      "dev": true
+      "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c="
     },
     "base": {
       "version": "0.11.2",
@@ -1017,7 +1037,6 @@
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
       "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
-      "dev": true,
       "requires": {
         "balanced-match": "1.0.0",
         "concat-map": "0.0.1"
@@ -1186,11 +1205,19 @@
         }
       }
     },
+    "camel-case": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/camel-case/-/camel-case-1.2.2.tgz",
+      "integrity": "sha1-Gsp8TRlTWaLOmVV5NDPG5VQlEfI=",
+      "requires": {
+        "sentence-case": "1.1.3",
+        "upper-case": "1.1.3"
+      }
+    },
     "camelcase": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-1.2.1.tgz",
-      "integrity": "sha1-m7UwTS4LVmmLLHWLCKPqqdqlijk=",
-      "dev": true
+      "integrity": "sha1-m7UwTS4LVmmLLHWLCKPqqdqlijk="
     },
     "camelcase-keys": {
       "version": "2.1.0",
@@ -1269,6 +1296,29 @@
         "supports-color": "2.0.0"
       }
     },
+    "change-case": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/change-case/-/change-case-2.3.1.tgz",
+      "integrity": "sha1-LE/ePwY7tB0AzWjg1aCdthy+iU8=",
+      "requires": {
+        "camel-case": "1.2.2",
+        "constant-case": "1.1.2",
+        "dot-case": "1.1.2",
+        "is-lower-case": "1.1.3",
+        "is-upper-case": "1.1.2",
+        "lower-case": "1.1.4",
+        "lower-case-first": "1.0.2",
+        "param-case": "1.1.2",
+        "pascal-case": "1.1.2",
+        "path-case": "1.1.2",
+        "sentence-case": "1.1.3",
+        "snake-case": "1.1.2",
+        "swap-case": "1.1.2",
+        "title-case": "1.1.2",
+        "upper-case": "1.1.3",
+        "upper-case-first": "1.1.2"
+      }
+    },
     "chokidar": {
       "version": "1.7.0",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-1.7.0.tgz",
@@ -1391,6 +1441,48 @@
         }
       }
     },
+    "clean-css": {
+      "version": "3.4.28",
+      "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-3.4.28.tgz",
+      "integrity": "sha1-vxlF6C/ICPVWlebd6uwBQA79A/8=",
+      "requires": {
+        "commander": "2.8.1",
+        "source-map": "0.4.4"
+      },
+      "dependencies": {
+        "source-map": {
+          "version": "0.4.4",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.4.4.tgz",
+          "integrity": "sha1-66T12pwNyZneaAMti092FzZSA2s=",
+          "requires": {
+            "amdefine": "1.0.1"
+          }
+        }
+      }
+    },
+    "cli": {
+      "version": "0.10.0",
+      "resolved": "https://registry.npmjs.org/cli/-/cli-0.10.0.tgz",
+      "integrity": "sha1-ML/I4qV0ptQmKecHjExl0uOBt14=",
+      "requires": {
+        "exit": "0.1.2",
+        "glob": "5.0.15"
+      },
+      "dependencies": {
+        "glob": {
+          "version": "5.0.15",
+          "resolved": "https://registry.npmjs.org/glob/-/glob-5.0.15.tgz",
+          "integrity": "sha1-G8k2ueAvSmA/zCIuz3Yz0wuLk7E=",
+          "requires": {
+            "inflight": "1.0.6",
+            "inherits": "2.0.3",
+            "minimatch": "3.0.4",
+            "once": "1.4.0",
+            "path-is-absolute": "1.0.1"
+          }
+        }
+      }
+    },
     "cliui": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/cliui/-/cliui-2.1.0.tgz",
@@ -1491,6 +1583,14 @@
       "integrity": "sha1-FopHAXVran9RoSzgyXv6KMCE7WM=",
       "dev": true
     },
+    "commander": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-2.8.1.tgz",
+      "integrity": "sha1-Br42f+v9oMMwqh4qBy09yXYkJdQ=",
+      "requires": {
+        "graceful-readlink": "1.0.1"
+      }
+    },
     "commondir": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/commondir/-/commondir-1.0.1.tgz",
@@ -1530,8 +1630,42 @@
     "concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
-      "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=",
-      "dev": true
+      "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s="
+    },
+    "concat-stream": {
+      "version": "1.5.2",
+      "resolved": "https://registry.npmjs.org/concat-stream/-/concat-stream-1.5.2.tgz",
+      "integrity": "sha1-cIl4Yk2FavQaWnQd790mHadSwmY=",
+      "requires": {
+        "inherits": "2.0.3",
+        "readable-stream": "2.0.6",
+        "typedarray": "0.0.6"
+      },
+      "dependencies": {
+        "process-nextick-args": {
+          "version": "1.0.7",
+          "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-1.0.7.tgz",
+          "integrity": "sha1-FQ4gt1ZZCtP5EJPyWk8q2L/zC6M="
+        },
+        "readable-stream": {
+          "version": "2.0.6",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.0.6.tgz",
+          "integrity": "sha1-j5A0HmilPMySh4jaz80Rs265t44=",
+          "requires": {
+            "core-util-is": "1.0.2",
+            "inherits": "2.0.3",
+            "isarray": "1.0.0",
+            "process-nextick-args": "1.0.7",
+            "string_decoder": "0.10.31",
+            "util-deprecate": "1.0.2"
+          }
+        },
+        "string_decoder": {
+          "version": "0.10.31",
+          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
+          "integrity": "sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ="
+        }
+      }
     },
     "connect-history-api-fallback": {
       "version": "1.5.0",
@@ -1557,6 +1691,15 @@
         "bluebird": "3.5.1"
       }
     },
+    "constant-case": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/constant-case/-/constant-case-1.1.2.tgz",
+      "integrity": "sha1-jsLKW6ND4Aqjjb9OIA/VrJB+/WM=",
+      "requires": {
+        "snake-case": "1.1.2",
+        "upper-case": "1.1.3"
+      }
+    },
     "constants-browserify": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/constants-browserify/-/constants-browserify-1.0.0.tgz",
@@ -1608,8 +1751,7 @@
     "core-util-is": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
-      "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=",
-      "dev": true
+      "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac="
     },
     "cosmiconfig": {
       "version": "2.2.2",
@@ -1860,8 +2002,7 @@
     "decamelize": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz",
-      "integrity": "sha1-9lNNFRSCabIDUue+4m9QH5oZEpA=",
-      "dev": true
+      "integrity": "sha1-9lNNFRSCabIDUue+4m9QH5oZEpA="
     },
     "decode-uri-component": {
       "version": "0.2.0",
@@ -1993,6 +2134,14 @@
       "integrity": "sha512-jnjyiM6eRyZl2H+W8Q/zLMA481hzi0eszAaBUzIVnmYVDBbnLxVNnfu1HgEBvCbL+71FrxMl3E6lpKH7Ge3OXA==",
       "dev": true
     },
+    "dot-case": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/dot-case/-/dot-case-1.1.2.tgz",
+      "integrity": "sha1-HnOCaQDeKNbeVIC8HeMdCEKwa+w=",
+      "requires": {
+        "sentence-case": "1.1.3"
+      }
+    },
     "ee-first": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
@@ -2270,6 +2419,11 @@
         "strip-eof": "1.0.0"
       }
     },
+    "exit": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/exit/-/exit-0.1.2.tgz",
+      "integrity": "sha1-BjJjj42HfMghB9MKD/8aF8uhzQw="
+    },
     "expand-brackets": {
       "version": "0.1.5",
       "resolved": "https://registry.npmjs.org/expand-brackets/-/expand-brackets-0.1.5.tgz",
@@ -3497,6 +3651,11 @@
       "integrity": "sha1-Dovf5NHduIVNZOBOp8AOKgJuVlg=",
       "dev": true
     },
+    "graceful-readlink": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/graceful-readlink/-/graceful-readlink-1.0.1.tgz",
+      "integrity": "sha1-TK+tdrxi8C+gObL5Tpo906ORpyU="
+    },
     "handle-thing": {
       "version": "1.2.5",
       "resolved": "https://registry.npmjs.org/handle-thing/-/handle-thing-1.2.5.tgz",
@@ -3669,6 +3828,56 @@
       "integrity": "sha1-DfKTUfByEWNRXfueVUPl9u7VFi8=",
       "dev": true
     },
+    "html-minifier": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/html-minifier/-/html-minifier-0.8.0.tgz",
+      "integrity": "sha1-Esy7r/w9FnT3B4Fs5IJdS4kigbo=",
+      "requires": {
+        "change-case": "2.3.1",
+        "clean-css": "3.4.28",
+        "cli": "0.10.0",
+        "concat-stream": "1.5.2",
+        "relateurl": "0.2.7",
+        "uglify-js": "2.4.24"
+      },
+      "dependencies": {
+        "async": {
+          "version": "0.2.10",
+          "resolved": "https://registry.npmjs.org/async/-/async-0.2.10.tgz",
+          "integrity": "sha1-trvgsGdLnXGXCMo43owjfLUmw9E="
+        },
+        "source-map": {
+          "version": "0.1.34",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.1.34.tgz",
+          "integrity": "sha1-p8/omux7FoLDsZjQrPtH19CQVms=",
+          "requires": {
+            "amdefine": "1.0.1"
+          }
+        },
+        "uglify-js": {
+          "version": "2.4.24",
+          "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-2.4.24.tgz",
+          "integrity": "sha1-+tV1XB4Vd2WLsG/5q25UjJW+vW4=",
+          "requires": {
+            "async": "0.2.10",
+            "source-map": "0.1.34",
+            "uglify-to-browserify": "1.0.2",
+            "yargs": "3.5.4"
+          }
+        },
+        "yargs": {
+          "version": "3.5.4",
+          "resolved": "https://registry.npmjs.org/yargs/-/yargs-3.5.4.tgz",
+          "integrity": "sha1-2K/49mXpTDS9JZvevRv68N3TU2E=",
+          "requires": {
+            "camelcase": "1.2.1",
+            "decamelize": "1.2.0",
+            "window-size": "0.1.0",
+            "wordwrap": "0.0.2"
+          }
+        }
+      }
+    },
     "http-deceiver": {
       "version": "1.2.7",
       "resolved": "https://registry.npmjs.org/http-deceiver/-/http-deceiver-1.2.7.tgz",
@@ -3879,7 +4088,6 @@
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
       "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=",
-      "dev": true,
       "requires": {
         "once": "1.4.0",
         "wrappy": "1.0.2"
@@ -3888,8 +4096,7 @@
     "inherits": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
-      "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=",
-      "dev": true
+      "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4="
     },
     "internal-ip": {
       "version": "1.2.0",
@@ -4094,6 +4301,14 @@
         "is-extglob": "1.0.0"
       }
     },
+    "is-lower-case": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/is-lower-case/-/is-lower-case-1.1.3.tgz",
+      "integrity": "sha1-fhR75HaNxGbbO/shzGCzHmrWk5M=",
+      "requires": {
+        "lower-case": "1.1.4"
+      }
+    },
     "is-number": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/is-number/-/is-number-2.1.0.tgz",
@@ -4212,6 +4427,14 @@
       "integrity": "sha1-PMWfAAJRlLarLjjbrmaJJWtmBXI=",
       "dev": true
     },
+    "is-upper-case": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/is-upper-case/-/is-upper-case-1.1.2.tgz",
+      "integrity": "sha1-jQsfp+eTOh5YSDYA7H2WYcuvdW8=",
+      "requires": {
+        "upper-case": "1.1.3"
+      }
+    },
     "is-utf8": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/is-utf8/-/is-utf8-0.2.1.tgz",
@@ -4233,8 +4456,7 @@
     "isarray": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
-      "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=",
-      "dev": true
+      "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE="
     },
     "isexe": {
       "version": "2.0.0",
@@ -4435,6 +4657,19 @@
         "signal-exit": "3.0.2"
       }
     },
+    "lower-case": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-1.1.4.tgz",
+      "integrity": "sha1-miyr0bno4K6ZOkv31YdcOcQujqw="
+    },
+    "lower-case-first": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/lower-case-first/-/lower-case-first-1.0.2.tgz",
+      "integrity": "sha1-5dp8JvKacHO+AtUrrJmA5ZIq36E=",
+      "requires": {
+        "lower-case": "1.1.4"
+      }
+    },
     "lru-cache": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-4.1.1.tgz",
@@ -4725,7 +4960,6 @@
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
       "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
-      "dev": true,
       "requires": {
         "brace-expansion": "1.1.11"
       }
@@ -5077,7 +5311,6 @@
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
       "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
-      "dev": true,
       "requires": {
         "wrappy": "1.0.2"
       }
@@ -5183,6 +5416,14 @@
       "integrity": "sha512-lQe48YPsMJAig+yngZ87Lus+NF+3mtu7DVOBu6b/gHO1YpKwIj5AWjZ/TOS7i46HD/UixzWb1zeWDZfGZ3iYcg==",
       "dev": true
     },
+    "param-case": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/param-case/-/param-case-1.1.2.tgz",
+      "integrity": "sha1-3LCRpDwlm5Io8cNB57akTqC/l0M=",
+      "requires": {
+        "sentence-case": "1.1.3"
+      }
+    },
     "parse-asn1": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/parse-asn1/-/parse-asn1-5.1.0.tgz",
@@ -5217,12 +5458,26 @@
         "error-ex": "1.3.1"
       }
     },
+    "parse5": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/parse5/-/parse5-1.5.1.tgz",
+      "integrity": "sha1-m387DeMr543CQBsXVzzK8Pb1nZQ="
+    },
     "parseurl": {
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.2.tgz",
       "integrity": "sha1-/CidTtiZMRlGDBViUyYs3I3mW/M=",
       "dev": true
     },
+    "pascal-case": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/pascal-case/-/pascal-case-1.1.2.tgz",
+      "integrity": "sha1-Pl1kogBDgwp8STRMLXS0G+DJyZs=",
+      "requires": {
+        "camel-case": "1.2.2",
+        "upper-case-first": "1.1.2"
+      }
+    },
     "pascalcase": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/pascalcase/-/pascalcase-0.1.1.tgz",
@@ -5235,6 +5490,14 @@
       "integrity": "sha1-oLhwcpquIUAFt9UDLsLLuw+0RRo=",
       "dev": true
     },
+    "path-case": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/path-case/-/path-case-1.1.2.tgz",
+      "integrity": "sha1-UM5roNO+090LXCqcRVNpdDRAlRQ=",
+      "requires": {
+        "sentence-case": "1.1.3"
+      }
+    },
     "path-dirname": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/path-dirname/-/path-dirname-1.0.2.tgz",
@@ -5250,8 +5513,7 @@
     "path-is-absolute": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
-      "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=",
-      "dev": true
+      "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18="
     },
     "path-is-inside": {
       "version": "1.0.2",
@@ -6376,6 +6638,11 @@
         }
       }
     },
+    "relateurl": {
+      "version": "0.2.7",
+      "resolved": "https://registry.npmjs.org/relateurl/-/relateurl-0.2.7.tgz",
+      "integrity": "sha1-VNvzd+UUQKypCkzSdGANP/LYiKk="
+    },
     "remove-trailing-separator": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz",
@@ -6548,6 +6815,14 @@
         "statuses": "1.3.1"
       }
     },
+    "sentence-case": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/sentence-case/-/sentence-case-1.1.3.tgz",
+      "integrity": "sha1-gDSq/CFFdy06vhUJqkLJ4QQtwTk=",
+      "requires": {
+        "lower-case": "1.1.4"
+      }
+    },
     "serve-index": {
       "version": "1.9.1",
       "resolved": "https://registry.npmjs.org/serve-index/-/serve-index-1.9.1.tgz",
@@ -6657,6 +6932,14 @@
       "integrity": "sha1-xB8vbDn8FtHNF61LXYlhFK5HDVU=",
       "dev": true
     },
+    "snake-case": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/snake-case/-/snake-case-1.1.2.tgz",
+      "integrity": "sha1-DC8l4wUVjZoY09l3BmGH/vilpmo=",
+      "requires": {
+        "sentence-case": "1.1.3"
+      }
+    },
     "snapdragon": {
       "version": "0.8.1",
       "resolved": "https://registry.npmjs.org/snapdragon/-/snapdragon-0.8.1.tgz",
@@ -7145,6 +7428,15 @@
         "whet.extend": "0.9.9"
       }
     },
+    "swap-case": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/swap-case/-/swap-case-1.1.2.tgz",
+      "integrity": "sha1-w5IDpFhzhfrTyFCgvRvK+ggZdOM=",
+      "requires": {
+        "lower-case": "1.1.4",
+        "upper-case": "1.1.3"
+      }
+    },
     "tapable": {
       "version": "0.2.8",
       "resolved": "https://registry.npmjs.org/tapable/-/tapable-0.2.8.tgz",
@@ -7172,6 +7464,15 @@
         "setimmediate": "1.0.5"
       }
     },
+    "title-case": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/title-case/-/title-case-1.1.2.tgz",
+      "integrity": "sha1-+uSmrlRr+iLQg6DuqRCkDRLtT1o=",
+      "requires": {
+        "sentence-case": "1.1.3",
+        "upper-case": "1.1.3"
+      }
+    },
     "to-arraybuffer": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/to-arraybuffer/-/to-arraybuffer-1.0.1.tgz",
@@ -7321,6 +7622,11 @@
         "mime-types": "2.1.17"
       }
     },
+    "typedarray": {
+      "version": "0.0.6",
+      "resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz",
+      "integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c="
+    },
     "uglify-js": {
       "version": "2.8.29",
       "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-2.8.29.tgz",
@@ -7349,9 +7655,7 @@
     "uglify-to-browserify": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/uglify-to-browserify/-/uglify-to-browserify-1.0.2.tgz",
-      "integrity": "sha1-bgkk1r2mta/jSeOabWMoUKD4grc=",
-      "dev": true,
-      "optional": true
+      "integrity": "sha1-bgkk1r2mta/jSeOabWMoUKD4grc="
     },
     "uglifyjs-webpack-plugin": {
       "version": "0.4.6",
@@ -7487,6 +7791,19 @@
         }
       }
     },
+    "upper-case": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/upper-case/-/upper-case-1.1.3.tgz",
+      "integrity": "sha1-9rRQHC7EzdJrp4vnIilh3ndiFZg="
+    },
+    "upper-case-first": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/upper-case-first/-/upper-case-first-1.1.2.tgz",
+      "integrity": "sha1-XXm+3P8UQZUY/S7bCgUHybaFkRU=",
+      "requires": {
+        "upper-case": "1.1.3"
+      }
+    },
     "urix": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/urix/-/urix-0.1.0.tgz",
@@ -7643,8 +7960,7 @@
     "util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
-      "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=",
-      "dev": true
+      "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8="
     },
     "utils-merge": {
       "version": "1.0.1",
@@ -7694,6 +8010,24 @@
       "resolved": "https://registry.npmjs.org/vue/-/vue-2.5.13.tgz",
       "integrity": "sha512-3D+lY7HTkKbtswDM4BBHgqyq+qo8IAEE8lz8va1dz3LLmttjgo0FxairO4r1iN2OBqk8o1FyL4hvzzTFEdQSEw=="
     },
+    "vue-component-compiler": {
+      "version": "1.1.12",
+      "resolved": "https://registry.npmjs.org/vue-component-compiler/-/vue-component-compiler-1.1.12.tgz",
+      "integrity": "sha1-0wQYj1C5dGSEYdOT0rl0wWY4+F0=",
+      "requires": {
+        "async": "1.5.2",
+        "clean-css": "3.4.28",
+        "html-minifier": "0.8.0",
+        "parse5": "1.5.1"
+      },
+      "dependencies": {
+        "async": {
+          "version": "1.5.2",
+          "resolved": "https://registry.npmjs.org/async/-/async-1.5.2.tgz",
+          "integrity": "sha1-7GphrlZIDAw8skHJVhjiCJL5Zyo="
+        }
+      }
+    },
     "vue-hot-reload-api": {
       "version": "2.2.4",
       "resolved": "https://registry.npmjs.org/vue-hot-reload-api/-/vue-hot-reload-api-2.2.4.tgz",
@@ -8454,14 +8788,12 @@
     "window-size": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/window-size/-/window-size-0.1.0.tgz",
-      "integrity": "sha1-VDjNLqk7IC76Ohn+iIeu58lPnJ0=",
-      "dev": true
+      "integrity": "sha1-VDjNLqk7IC76Ohn+iIeu58lPnJ0="
     },
     "wordwrap": {
       "version": "0.0.2",
       "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-0.0.2.tgz",
-      "integrity": "sha1-t5Zpu0LstAn4PVg8rVLKF+qhZD8=",
-      "dev": true
+      "integrity": "sha1-t5Zpu0LstAn4PVg8rVLKF+qhZD8="
     },
     "wrap-ansi": {
       "version": "2.1.0",
@@ -8489,8 +8821,7 @@
     "wrappy": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
-      "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=",
-      "dev": true
+      "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8="
     },
     "xtend": {
       "version": "4.0.1",
diff --git a/package.json b/package.json
index 3c02739..42be83c 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
     "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
   },
   "dependencies": {
+    "atom-vue-component-compiler": "0.0.4",
     "vue": "^2.5.11"
   },
   "browserslist": [
diff --git a/src/App.vue b/src/App.vue
index 1e9ce37..84c241b 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,40 +1,50 @@
-<template>
-  <div>
-    <app-header></app-header>
-    <app-ninjas v-bind:ninjas="ninjas"></app-ninjas>
-    <app-footer></app-footer>
 
-  </div>
+<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>
+    </div>
 </template>
 
 <script>
+// Imports
 import Header from './components/Header.vue';
 import Footer from './components/Footer.vue';
 import Ninjas from './components/Ninjas.vue';
-
 export default {
-  components:{
-    'app-header': Header,
-    'app-footer': Footer,
-    'app-ninjas': Ninjas
-  },
-  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}
-      ],
+    components: {
+        'app-header': Header,
+        'app-footer': Footer,
+        'app-ninjas': Ninjas
+    },
+    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 Ninjas'
+        }
+    },
+    methods: {
+      updateTitle: function(updatedTitle){
+        this.title = updatedTitle;
+      }
     }
-  }
 }
-
 </script>
 
-<style scoped>
-
-
+<style>
+body{
+    margin: 0;
+    font-family: 'Nunito SemiBold';
+}
 </style>
diff --git a/src/components/Footer.vue b/src/components/Footer.vue
index 0929780..1e238db 100644
--- a/src/components/Footer.vue
+++ b/src/components/Footer.vue
@@ -1,29 +1,29 @@
 <template>
-  <footer>
-    <p>{{copyright}}</p>
-  </footer>
+    <footer>
+        <p>Copyright 2017 {{ title }}</p>
+    </footer>
 </template>
-
 <script>
-
 export default {
-  data () {
-    return {
-      copyright:"copyright 2017 Vue Ninjas"
+    props: {
+      title: {
+        type: String,
+        required: true
+      }
+    },
+    data(){
+        return{
+        }
     }
-  }
 }
-
 </script>
-
 <style scoped>
 footer{
-  background: #222;
-  padding: 6px;
+    background: #222;
+    padding: 6px;
 }
-
 p{
-  color: lightgreen;
-  text-align: center;
+        color: lightgreen;
+        text-align: center;
 }
 </style>
diff --git a/src/components/Header.vue b/src/components/Header.vue
index ba89b1f..3e00af7 100644
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -1,28 +1,34 @@
 <template>
-  <header>
-    <h1>{{ title }}</h1>
-  </header>
+    <header>
+        <h1 v-on:click="changeTitle">{{ title }}</h1>
+    </header>
 </template>
-
 <script>
-
 export default {
-  data () {
-    return {
-      title: 'Vue Header'
+    props: {
+      title: {
+        type: String,
+        required: true
+      }
+    },
+    data(){
+        return{
+        }
+    },
+    methods: {
+      changeTitle: function(){
+        this.$emit('changeTitle', 'Vue Wizards');
+      }
     }
-  }
 }
-
 </script>
-
 <style scoped>
-  header{
-    background:lightgreen;
+header{
+    background: lightgreen;
     padding: 10px;
-  }
-  h1{
-    color:#222;
-    text-align:center;
-  }
+}
+h1{
+    color: #222;
+    text-align: center;
+}
 </style>
diff --git a/src/components/Ninjas.vue b/src/components/Ninjas.vue
index 08f5f41..5f67d95 100644
--- a/src/components/Ninjas.vue
+++ b/src/components/Ninjas.vue
@@ -7,6 +7,7 @@
       <h3 v-show="ninja.show">{{ninja.speciality}}</h3>
       </li>
     </ul>
+    <button v-on:click="deleteNinja">Delete a Ninja</button>
   </div>
 </template>
 
@@ -31,7 +32,12 @@ export default {
       //     {name: 'Yoshi', speciality: 'Data Diggin', show: false}
       // ],
     }
-  }
+  },
+  methods: {
+      deleteNinja: function(){
+        this.ninjas.pop();
+      }
+    }
 }
 
 </script>