15

Author: kossiecoder

src/components/KossieCoder.vue

@@ -0,0 +1,26 @@
+<template>
+    <div>
+        <p>{{ name }}</p><br>
+        <button @click="updateName">Change Name</button>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            name: 'Kossie Coder',        
+        }
+    },
+
+    methods: {
+        updateName() {
+            this.name = 'Kossie Coder Updated';
+        }
+    }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/About.vue

@@ -1,5 +1,16 @@
 <template>
   <div class="about">
     <h1>This is an about page</h1>
+    <KossieCoder />
   </div>
 </template>
+
+<script>
+import KossieCoder from '@/components/KossieCoder.vue';
+
+export default {
+  components: {
+    KossieCoder
+  }  
+}
+</script>

src/views/Home.vue

@@ -1,18 +1,28 @@
 <template>
-  <div class="home">
-    <img alt="Vue logo" src="../assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
+  <div>
+    <h1>This is Home page</h1>
+    <KossieCoder />
   </div>
 </template>
 
 <script>
-// @ is an alias to /src
-import HelloWorld from '@/components/HelloWorld.vue'
+import KossieCoder from '@/components/KossieCoder.vue';
 
 export default {
-  name: 'home',
   components: {
-    HelloWorld
+    KossieCoder
+  },
+
+  data() {
+    return {
+      name: 'Kossie Coder'
+    }
   }
 }
 </script>
+
+<style scoped>
+h1 {
+  color: red;
+}
+</style>