L4 ending code

Author: atomjar

src/App.vue

@@ -1,8 +1,8 @@
 <template>
   <div id="app">
     <div id="nav">
-      <router-link to="/">Home</router-link> |
-      <router-link to="/about">About</router-link>
+      <router-link :to="{ name: 'EventList' }">Events</router-link> |
+      <router-link :to="{ name: 'About' }">About</router-link>
     </div>
     <router-view />
   </div>
@@ -29,4 +29,8 @@
 #nav a.router-link-exact-active {
   color: #42b983;
 }
+
+h4 {
+  font-size: 20px;
+}
 </style>

src/components/EventCard.vue

@@ -9,7 +9,7 @@
 export default {
   props: {
     event: {
-      type: Array,
+      type: Object,
       required: true
     }
   }
@@ -24,9 +24,7 @@ export default {
   border: 1px solid #39495c;
   margin-bottom: 18px;
 }
-.event-card h4 {
-  font-size: 20px;
-}
+
 .event-card:hover {
   transform: scale(1.01);
   box-shadow: 0 3px 12px 0 rgba(0, 0, 0, 0.2);

src/main.js

@@ -1,9 +1,9 @@
-import { createApp } from "vue";
-import App from "./App.vue";
-import router from "./router";
-import store from "./store";
+import { createApp } from 'vue'
+import App from './App.vue'
+import router from './router'
+import store from './store'
 
 createApp(App)
   .use(store)
   .use(router)
-  .mount("#app");
+  .mount('#app')

src/router/index.js

@@ -1,11 +1,11 @@
 import { createRouter, createWebHistory } from 'vue-router'
-import Home from '../views/Home.vue'
+import EventList from '../views/EventList.vue'
 
 const routes = [
   {
     path: '/',
-    name: 'Home',
-    component: Home
+    name: 'EventList',
+    component: EventList
   },
   {
     path: '/about',

src/views/About.vue

@@ -1,5 +1,5 @@
 <template>
   <div class="about">
-    <h1>This is an about page</h1>
+    <p>A site for events to better the world.</p>
   </div>
 </template>