L7 end

.prettierrc.js

@@ -0,0 +1,4 @@
+module.exports = {
+  singleQuote: true,
+  semi: false
+}

jsconfig.json

@@ -0,0 +1,15 @@
+{
+    "compilerOptions": {
+      "target": "es2015",
+      "module": "esnext",
+      "baseUrl": "./",
+      "paths": {
+        "@/*": ["components/*"]
+      }
+    },
+    "include": [
+      "src/**/*.vue",
+      "src/**/*.js"
+    ]
+  }
+

package.json

@@ -11,7 +11,8 @@
     "core-js": "^3.6.5",
     "vue": "^3.0.0-0",
     "vue-router": "^4.0.0-0",
-    "vuex": "^4.0.0-0"
+    "vuex": "^4.0.0-0",
+    "axios": "0.21.4"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.5.0",

src/App.vue

@@ -1,9 +1,10 @@
 <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>
 </template>
@@ -19,9 +20,12 @@
 
 #nav {
   padding: 30px;
+  display: flex;
+  justify-content: center;
 }
 
 #nav a {
+  margin-left: 10px;
   font-weight: bold;
   color: #2c3e50;
 }

src/components/EventCard.vue

@@ -0,0 +1,41 @@
+<template>
+  <router-link
+    class="event-link "
+    :to="{ name: 'EventDetails', params: { id: event.id } }"
+  >
+    <div class="event-card">
+      <span> {{ event.time }} on {{ event.date }} </span>
+      <h4>{{ event.title }}</h4>
+    </div>
+  </router-link>
+  <router-view />
+</template>
+
+<script>
+export default {
+  name: 'EventCard',
+  props: {
+    event: Object
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+.event-card {
+  padding: 20px;
+  width: 250px;
+  cursor: pointer;
+  border: 1px solid #39495c;
+  border-radius: 5px;
+  margin-bottom: 18px;
+}
+.event-card:hover {
+  transform: scale(1.01);
+  box-shadow: 0 3px 12px 0 rgba(0, 0, 0, 0.2);
+}
+.event-link {
+  color: #2c3e50;
+  text-decoration: none;
+}
+</style>

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,26 +1,30 @@
-import { createRouter, createWebHistory } from "vue-router";
-import Home from "../views/Home.vue";
+import { createRouter, createWebHistory } from 'vue-router'
+import EventList from '../views/EventList.vue'
+import About from '../views/About.vue'
+import EventDetails from '../views/EventDetails.vue'
 
 const routes = [
   {
-    path: "/",
-    name: "Home",
-    component: Home
+    path: '/',
+    name: 'EventList',
+    component: EventList
   },
   {
-    path: "/about",
-    name: "About",
-    // route level code-splitting
-    // this generates a separate chunk (about.[hash].js) for this route
-    // which is lazy-loaded when the route is visited.
-    component: () =>
-      import(/* webpackChunkName: "about" */ "../views/About.vue")
+    path: '/about',
+    name: 'About',
+    component: About
+  },
+  {
+    path: '/event/:id',
+    name: 'EventDetails',
+    props: true,
+    component: EventDetails
   }
-];
+]
 
 const router = createRouter({
   history: createWebHistory(process.env.BASE_URL),
   routes
-});
+})
 
-export default router;
+export default router

src/services/EventService.js

@@ -0,0 +1,19 @@
+import axios from 'axios'
+
+const apiClient = axios.create({
+  baseURL: 'https://my-json-server.typicode.com/IrleySilvestre/repo-vue3',
+  withCredentials: false,
+  headers: {
+    Accept: 'application/json',
+    'Content-Type': 'application/json'
+  }
+})
+
+export default {
+  getEvents() {
+    return apiClient.get('/events')
+  },
+  getEvent(id) {
+    return apiClient.get(`/events/${id}`)
+  }
+}

src/store/index.js

@@ -1,8 +1,8 @@
-import { createStore } from "vuex";
+import { createStore } from 'vuex'
 
 export default createStore({
   state: {},
   mutations: {},
   actions: {},
   modules: {}
-});
+})

src/views/About.vue

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

src/views/EventDetails.vue

@@ -0,0 +1,32 @@
+<template>
+  <div v-if="event">
+    <h1>{{ event.title }}</h1>
+    <p>{{ event.time }} on {{ event.date }} @ {{ event.location }}</p>
+    <p>{{ event.description }}</p>
+  </div>
+</template>
+
+<script>
+import EventService from '@/services/EventService.js'
+
+export default {
+  props: ['id'],
+  data() {
+    return {
+      event: null
+    }
+  },
+  //   fetch event by id and set local data
+  created() {
+    EventService.getEvent(this.id)
+      .then(response => {
+        this.event = response.data
+      })
+      .catch(error => {
+        console.log(error)
+      })
+  }
+}
+</script>
+
+<style></style>