├── .prettierrc.js
├── babel.config.js
├── public
    ├── favicon.ico
    └── index.html
├── src
    ├── assets
    │   └── logo.png
    ├── views
    │   ├── About.vue
    │   ├── EventDetails.vue
    │   └── EventList.vue
    ├── store
    │   └── index.ts
    ├── shims-vue.d.ts
    ├── main.ts
    ├── types.ts
    ├── services
    │   └── EventService.ts
    ├── router
    │   └── index.ts
    ├── App.vue
    └── components
    │   └── EventCard.vue
├── .gitignore
├── README.md
├── tsconfig.json
├── db.json
└── package.json


/.prettierrc.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   singleQuote: true,
3 |   semi: false
4 | }
5 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: ['@vue/cli-plugin-babel/preset']
3 | }
4 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Code-Pop/Real-World-Vue-3-TypeScript/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Code-Pop/Real-World-Vue-3-TypeScript/HEAD/src/assets/logo.png


--------------------------------------------------------------------------------
/src/views/About.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <div class="about">
3 |     <p>A site for events to better the world.</p>
4 |   </div>
5 | </template>
6 | 


--------------------------------------------------------------------------------
/src/store/index.ts:
--------------------------------------------------------------------------------
1 | import { createStore } from 'vuex'
2 | 
3 | export default createStore({
4 |   state: {},
5 |   mutations: {},
6 |   actions: {},
7 |   modules: {}
8 | })
9 | 


--------------------------------------------------------------------------------
/src/shims-vue.d.ts:
--------------------------------------------------------------------------------
1 | declare module '*.vue' {
2 |   import type { DefineComponent } from 'vue'
3 |   const component: DefineComponent<{}, {}, any>
4 |   export default component
5 | }
6 | 


--------------------------------------------------------------------------------
/src/main.ts:
--------------------------------------------------------------------------------
 1 | import { createApp } from 'vue'
 2 | import App from './App.vue'
 3 | import router from './router'
 4 | import store from './store'
 5 | 
 6 | createApp(App)
 7 |   .use(store)
 8 |   .use(router)
 9 |   .mount('#app')
10 | 


--------------------------------------------------------------------------------
/src/types.ts:
--------------------------------------------------------------------------------
 1 | // Contain all the types we want to use for this app
 2 | 
 3 | export interface EventItem {
 4 |   id: number
 5 |   category: string
 6 |   title: string
 7 |   description: string
 8 |   location: string
 9 |   date: string
10 |   time: string
11 |   organizer: string
12 | }
13 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | 
 6 | # local env files
 7 | .env.local
 8 | .env.*.local
 9 | 
10 | # Log files
11 | npm-debug.log*
12 | yarn-debug.log*
13 | yarn-error.log*
14 | pnpm-debug.log*
15 | 
16 | # Editor directories and files
17 | .idea
18 | .vscode
19 | *.suo
20 | *.ntvs*
21 | *.njsproj
22 | *.sln
23 | *.sw?
24 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # real-world-vue
 2 | 
 3 | ## Project setup
 4 | ```
 5 | npm install
 6 | ```
 7 | 
 8 | ### Compiles and hot-reloads for development
 9 | ```
10 | npm run serve
11 | ```
12 | 
13 | ### Compiles and minifies for production
14 | ```
15 | npm run build
16 | ```
17 | 
18 | ### Lints and fixes files
19 | ```
20 | npm run lint
21 | ```
22 | 
23 | ### Customize configuration
24 | See [Configuration Reference](https://cli.vuejs.org/config/).
25 | 


--------------------------------------------------------------------------------
/src/services/EventService.ts:
--------------------------------------------------------------------------------
 1 | import axios from 'axios'
 2 | 
 3 | const apiClient = axios.create({
 4 |   baseURL: 'https://my-json-server.typicode.com/Code-Pop/Real-World_Vue-3',
 5 |   withCredentials: false,
 6 |   headers: {
 7 |     Accept: 'application/json',
 8 |     'Content-Type': 'application/json'
 9 |   }
10 | })
11 | 
12 | export default {
13 |   getEvents() {
14 |     return apiClient.get('/events')
15 |   },
16 |   getEvent(id: any) {
17 |     return apiClient.get('/events/' + id)
18 |   }
19 | }
20 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title><%= htmlWebpackPlugin.options.title %></title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |     <!-- built files will be auto injected -->
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/src/router/index.ts:
--------------------------------------------------------------------------------
 1 | import { createRouter, createWebHistory } from 'vue-router'
 2 | import EventList from '../views/EventList.vue'
 3 | import EventDetails from '../views/EventDetails.vue'
 4 | import About from '../views/About.vue'
 5 | 
 6 | const routes = [
 7 |   {
 8 |     path: '/',
 9 |     name: 'EventList',
10 |     component: EventList
11 |   },
12 |   {
13 |     path: '/event/:id',
14 |     name: 'EventDetails',
15 |     props: true,
16 |     component: EventDetails
17 |   },
18 |   {
19 |     path: '/about',
20 |     name: 'About',
21 |     component: About
22 |   }
23 | ]
24 | 
25 | const router = createRouter({
26 |   history: createWebHistory(process.env.BASE_URL),
27 |   routes
28 | })
29 | 
30 | export default router
31 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <div id="nav">
 4 |       <router-link :to="{ name: 'EventList' }">Events</router-link> |
 5 |       <router-link :to="{ name: 'About' }">About</router-link>
 6 |     </div>
 7 |     <router-view />
 8 |   </div>
 9 | </template>
10 | 
11 | <style>
12 | #app {
13 |   font-family: Avenir, Helvetica, Arial, sans-serif;
14 |   -webkit-font-smoothing: antialiased;
15 |   -moz-osx-font-smoothing: grayscale;
16 |   text-align: center;
17 |   color: #2c3e50;
18 | }
19 | 
20 | #nav {
21 |   padding: 30px;
22 | }
23 | 
24 | #nav a {
25 |   font-weight: bold;
26 |   color: #2c3e50;
27 | }
28 | 
29 | #nav a.router-link-exact-active {
30 |   color: #42b983;
31 | }
32 | 
33 | h4 {
34 |   font-size: 20px;
35 | }
36 | </style>
37 | 


--------------------------------------------------------------------------------
/src/views/EventDetails.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div v-if="event">
 3 |     <h1>{{ event.title }}</h1>
 4 |     <p>{{ event.time }} on {{ event.date }} @ {{ event.location }}</p>
 5 |     <p>{{ event.description }}</p>
 6 |   </div>
 7 | </template>
 8 | 
 9 | <script lang="ts">
10 | import { defineComponent } from 'vue'
11 | import { EventItem } from '../types'
12 | import EventService from '../services/EventService'
13 | export default defineComponent({
14 |   props: ['id'],
15 |   data() {
16 |     return {
17 |       event: {} as EventItem
18 |     }
19 |   },
20 |   created() {
21 |     EventService.getEvent(this.id)
22 |       .then(response => {
23 |         this.event = response.data
24 |       })
25 |       .catch(error => {
26 |         console.log(error)
27 |       })
28 |   }
29 | })
30 | </script>
31 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "esnext",
 4 |     "module": "esnext",
 5 |     "strict": true,
 6 |     "jsx": "preserve",
 7 |     "importHelpers": true,
 8 |     "moduleResolution": "node",
 9 |     "skipLibCheck": true,
10 |     "esModuleInterop": true,
11 |     "allowSyntheticDefaultImports": true,
12 |     "sourceMap": true,
13 |     "baseUrl": ".",
14 |     "types": [
15 |       "webpack-env"
16 |     ],
17 |     "paths": {
18 |       "@/*": [
19 |         "src/*"
20 |       ]
21 |     },
22 |     "lib": [
23 |       "esnext",
24 |       "dom",
25 |       "dom.iterable",
26 |       "scripthost"
27 |     ]
28 |   },
29 |   "include": [
30 |     "src/**/*.ts",
31 |     "src/**/*.tsx",
32 |     "src/**/*.vue",
33 |     "tests/**/*.ts",
34 |     "tests/**/*.tsx"
35 |   ],
36 |   "exclude": [
37 |     "node_modules"
38 |   ]
39 | }
40 | 


--------------------------------------------------------------------------------
/src/components/EventCard.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <router-link
 3 |     class="event-link"
 4 |     :to="{ name: 'EventDetails', params: { id: event.id } }"
 5 |   >
 6 |     <div class="event-card">
 7 |       <span>@{{ event.time }} on {{ event.date }}</span>
 8 |       <h4>{{ event.title }}</h4>
 9 |     </div>
10 |   </router-link>
11 | </template>
12 | 
13 | <script lang="ts">
14 | import { defineComponent } from 'vue'
15 | export default defineComponent({
16 |   props: {
17 |     event: {
18 |       type: Object,
19 |       required: true
20 |     }
21 |   }
22 | })
23 | </script>
24 | 
25 | <style scoped>
26 | .event-card {
27 |   padding: 20px;
28 |   width: 250px;
29 |   cursor: pointer;
30 |   border: 1px solid #39495c;
31 |   margin-bottom: 18px;
32 | }
33 | 
34 | .event-card:hover {
35 |   transform: scale(1.01);
36 |   box-shadow: 0 3px 12px 0 rgba(0, 0, 0, 0.2);
37 | }
38 | 
39 | .event-link {
40 |   color: #2c3e50;
41 |   text-decoration: none;
42 | }
43 | </style>
44 | 


--------------------------------------------------------------------------------
/src/views/EventList.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <h1>Events for Good</h1>
 3 |   <div class="events">
 4 |     <EventCard v-for="event in events" :key="event.id" :event="event" />
 5 |   </div>
 6 | </template>
 7 | 
 8 | <script lang="ts">
 9 | import { defineComponent } from 'vue'
10 | import { EventItem } from '../types'
11 | 
12 | import EventCard from '../components/EventCard.vue'
13 | import EventService from '../services/EventService'
14 | 
15 | export default defineComponent({
16 |   name: 'EventList',
17 |   components: {
18 |     EventCard
19 |   },
20 |   data() {
21 |     return {
22 |       events: [] as EventItem[]
23 |     }
24 |   },
25 |   created() {
26 |     EventService.getEvents()
27 |       .then(response => {
28 |         this.events = response.data
29 |       })
30 |       .catch(error => {
31 |         console.log(error)
32 |       })
33 |   }
34 | })
35 | </script>
36 | 
37 | <style scoped>
38 | .events {
39 |   display: flex;
40 |   flex-direction: column;
41 |   align-items: center;
42 | }
43 | </style>
44 | 


--------------------------------------------------------------------------------
/db.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "events": [
 3 |     {
 4 |       "id": 123,
 5 |       "category": "animal welfare",
 6 |       "title": "Cat Adoption Day",
 7 |       "description": "Find your new feline friend at this event.",
 8 |       "location": "Meow Town",
 9 |       "date": "January 28, 2022",
10 |       "time": "12:00",
11 |       "organizer": "Kat Laydee"
12 |     },
13 |     {
14 |       "id": 456,
15 |       "category": "food",
16 |       "title": "Community Gardening",
17 |       "description": "Join us as we tend to the community edible plants.",
18 |       "location": "Flora City",
19 |       "date": "March 14, 2022",
20 |       "time": "10:00",
21 |       "organizer": "Fern Pollin"
22 |     },
23 |     {
24 |       "id": 789,
25 |       "category": "sustainability",
26 |       "title": "Beach Cleanup",
27 |       "description": "Help pick up trash along the shore.",
28 |       "location": "Playa Del Carmen",
29 |       "date": "July 22, 2022",
30 |       "time": "11:00",
31 |       "organizer": "Carey Wales"
32 |     }
33 |   ]
34 | }
35 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "real-world-vue",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "lint": "vue-cli-service lint"
 9 |   },
10 |   "dependencies": {
11 |     "core-js": "^3.6.5",
12 |     "vue": "^3.0.0-0",
13 |     "vue-router": "^4.0.0-0",
14 |     "vuex": "^4.0.0-0"
15 |   },
16 |   "devDependencies": {
17 |     "@typescript-eslint/eslint-plugin": "^2.33.0",
18 |     "@typescript-eslint/parser": "^2.33.0",
19 |     "@vue/cli-plugin-babel": "~4.5.0",
20 |     "@vue/cli-plugin-eslint": "~4.5.0",
21 |     "@vue/cli-plugin-router": "~4.5.0",
22 |     "@vue/cli-plugin-typescript": "^4.5.8",
23 |     "@vue/cli-plugin-vuex": "~4.5.0",
24 |     "@vue/cli-service": "~4.5.0",
25 |     "@vue/compiler-sfc": "^3.0.0-0",
26 |     "@vue/eslint-config-prettier": "^6.0.0",
27 |     "@vue/eslint-config-typescript": "^5.0.2",
28 |     "axios": "^0.20.0",
29 |     "babel-eslint": "^10.1.0",
30 |     "eslint": "^6.7.2",
31 |     "eslint-plugin-prettier": "^3.1.3",
32 |     "eslint-plugin-vue": "^7.0.0-0",
33 |     "prettier": "^1.19.1",
34 |     "typescript": "~3.9.3"
35 |   },
36 |   "eslintConfig": {
37 |     "root": true,
38 |     "env": {
39 |       "node": true
40 |     },
41 |     "extends": [
42 |       "plugin:vue/vue3-essential",
43 |       "eslint:recommended",
44 |       "@vue/prettier",
45 |       "@vue/typescript"
46 |     ],
47 |     "plugins": [
48 |       "@typescript-eslint"
49 |     ],
50 |     "parserOptions": {
51 |       "parser": "@typescript-eslint/parser"
52 |     },
53 |     "rules": {
54 |       "no-unused-vars": "off"
55 |     }
56 |   },
57 |   "browserslist": [
58 |     "> 1%",
59 |     "last 2 versions",
60 |     "not dead"
61 |   ]
62 | }
63 | 


--------------------------------------------------------------------------------