├── app
    ├── vue.config.js
    ├── babel.config.js
    ├── public
    │   ├── favicon.ico
    │   ├── images
    │   │   ├── furby.jpg
    │   │   ├── cyclops.jpg
    │   │   ├── beast-wars.jpg
    │   │   ├── magic-mitt.png
    │   │   ├── tamagotchi.jpg
    │   │   ├── nerf-blaster.jpg
    │   │   ├── pokemon-cards.jpg
    │   │   ├── super-soaker.png
    │   │   ├── bop-it-extreme.jpg
    │   │   ├── classic-optimus.jpg
    │   │   ├── rock-em-sock-em.jpg
    │   │   └── ninja-turtle-pizza-thrower.jpg
    │   ├── index.html
    │   └── data.json
    ├── src
    │   ├── assets
    │   │   └── logo.png
    │   ├── main.js
    │   ├── App.vue
    │   └── components
    │   │   └── wish-list.vue
    ├── .gitignore
    ├── README.md
    └── package.json
├── .gitignore
├── netlify.toml
└── README.md


/app/vue.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {}


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # Local Netlify folder
2 | .netlify


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


--------------------------------------------------------------------------------
/netlify.toml:
--------------------------------------------------------------------------------
1 | [build]
2 |   base = "app"
3 |   command = "npm run build"
4 |   publish = "dist"
5 | 


--------------------------------------------------------------------------------
/app/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/learnwithjason/lets-learn-vue-3/main/app/public/favicon.ico


--------------------------------------------------------------------------------
/app/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/learnwithjason/lets-learn-vue-3/main/app/src/assets/logo.png


--------------------------------------------------------------------------------
/app/public/images/furby.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/learnwithjason/lets-learn-vue-3/main/app/public/images/furby.jpg


--------------------------------------------------------------------------------
/app/public/images/cyclops.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/learnwithjason/lets-learn-vue-3/main/app/public/images/cyclops.jpg


--------------------------------------------------------------------------------
/app/src/main.js:
--------------------------------------------------------------------------------
1 | import { createApp } from "vue";
2 | import App from "./App.vue";
3 | 
4 | createApp(App).mount("#app");
5 | 


--------------------------------------------------------------------------------
/app/public/images/beast-wars.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/learnwithjason/lets-learn-vue-3/main/app/public/images/beast-wars.jpg


--------------------------------------------------------------------------------
/app/public/images/magic-mitt.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/learnwithjason/lets-learn-vue-3/main/app/public/images/magic-mitt.png


--------------------------------------------------------------------------------
/app/public/images/tamagotchi.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/learnwithjason/lets-learn-vue-3/main/app/public/images/tamagotchi.jpg


--------------------------------------------------------------------------------
/app/public/images/nerf-blaster.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/learnwithjason/lets-learn-vue-3/main/app/public/images/nerf-blaster.jpg


--------------------------------------------------------------------------------
/app/public/images/pokemon-cards.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/learnwithjason/lets-learn-vue-3/main/app/public/images/pokemon-cards.jpg


--------------------------------------------------------------------------------
/app/public/images/super-soaker.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/learnwithjason/lets-learn-vue-3/main/app/public/images/super-soaker.png


--------------------------------------------------------------------------------
/app/public/images/bop-it-extreme.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/learnwithjason/lets-learn-vue-3/main/app/public/images/bop-it-extreme.jpg


--------------------------------------------------------------------------------
/app/public/images/classic-optimus.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/learnwithjason/lets-learn-vue-3/main/app/public/images/classic-optimus.jpg


--------------------------------------------------------------------------------
/app/public/images/rock-em-sock-em.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/learnwithjason/lets-learn-vue-3/main/app/public/images/rock-em-sock-em.jpg


--------------------------------------------------------------------------------
/app/public/images/ninja-turtle-pizza-thrower.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/learnwithjason/lets-learn-vue-3/main/app/public/images/ninja-turtle-pizza-thrower.jpg


--------------------------------------------------------------------------------
/app/.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 | 


--------------------------------------------------------------------------------
/app/README.md:
--------------------------------------------------------------------------------
 1 | # app
 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 | 


--------------------------------------------------------------------------------
/app/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <WishList />
 3 | </template>
 4 | 
 5 | <script>
 6 | import WishList from './components/wish-list.vue';
 7 | 
 8 | export default {
 9 |   name: 'App',
10 |   components: {
11 |     WishList,
12 |   },
13 | };
14 | </script>
15 | 
16 | <style lang="scss">
17 | #app {
18 |   font-family: Avenir, Helvetica, Arial, sans-serif;
19 |   -webkit-font-smoothing: antialiased;
20 |   -moz-osx-font-smoothing: grayscale;
21 |   text-align: center;
22 |   color: #2c3e50;
23 |   margin-top: 60px;
24 | }
25 | </style>
26 | 


--------------------------------------------------------------------------------
/app/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 | 


--------------------------------------------------------------------------------
/app/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "app",
 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"
13 |   },
14 |   "devDependencies": {
15 |     "@vue/cli-plugin-babel": "~4.5.0",
16 |     "@vue/cli-plugin-eslint": "~4.5.0",
17 |     "@vue/cli-service": "~4.5.0",
18 |     "@vue/compiler-sfc": "^3.0.0",
19 |     "@vue/eslint-config-prettier": "^6.0.0",
20 |     "babel-eslint": "^10.1.0",
21 |     "eslint": "^6.7.2",
22 |     "eslint-plugin-prettier": "^3.1.3",
23 |     "eslint-plugin-vue": "^7.0.0-0",
24 |     "node-sass": "^4.12.0",
25 |     "prettier": "^1.19.1",
26 |     "sass-loader": "^8.0.2"
27 |   },
28 |   "eslintConfig": {
29 |     "root": true,
30 |     "env": {
31 |       "node": true
32 |     },
33 |     "extends": [
34 |       "plugin:vue/vue3-essential",
35 |       "eslint:recommended",
36 |       "@vue/prettier"
37 |     ],
38 |     "parserOptions": {
39 |       "parser": "babel-eslint"
40 |     }
41 |   },
42 |   "browserslist": [
43 |     "> 1%",
44 |     "last 2 versions",
45 |     "not dead"
46 |   ]
47 | }


--------------------------------------------------------------------------------
/app/src/components/wish-list.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <h1>My Holiday Gift Wishlist</h1>
 4 |     <input type="text" v-model="filterText" />
 5 |     <ul :class="$style.wishlist">
 6 |       <li :key="gift.id" v-for="gift in filteredWishlist">
 7 |         <h2>{{ gift.label }}</h2>
 8 |         <img :src="`/images/${gift.image}`" :alt="gift.label" />
 9 |         <p>{{ gift.votes }}</p>
10 |         <button>wish for this</button>
11 |       </li>
12 |     </ul>
13 |   </div>
14 | </template>
15 | 
16 | <script>
17 | import gifts from '../../public/data.json';
18 | 
19 | export default {
20 |   data: () => ({
21 |     gifts,
22 |     filterText: '',
23 |   }),
24 |   computed: {
25 |     filteredWishlist: function() {
26 |       return this.gifts.filter((gift) => {
27 |         const label = gift.label.toLowerCase();
28 |         const search = this.filterText.toLowerCase();
29 | 
30 |         return label.includes(search);
31 |       });
32 |     },
33 |   },
34 | };
35 | </script>
36 | 
37 | <style lang="scss" module>
38 | .wishlist {
39 |   display: grid;
40 |   gap: 1rem;
41 |   grid-template-columns: repeat(auto-fit, 150px);
42 |   grid-template-rows: auto;
43 |   list-style: none;
44 |   justify-content: center;
45 |   padding: 0;
46 | 
47 |   h2 {
48 |     font-size: 1rem;
49 |   }
50 | 
51 |   img {
52 |     width: 100%;
53 |   }
54 | }
55 | </style>
56 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | <p align="center">
 2 |   <a href="https://www.learnwithjason.dev">
 3 |     <img src="https://res.cloudinary.com/jlengstorf/image/upload/q_auto,f_auto,w_240/v1579281727/lwj/learnwithjason.png" alt="Learn With Jason" width="120" />
 4 |   </a>
 5 | </p>
 6 | <h1 align="center">
 7 |   Let's Learn Vue 3! (with Ben Hong)
 8 | </h1>
 9 | <h3 align="center">
10 |   This app was built live on <em>Learn With Jason</em> and it was super fun and I’m sad you weren’t there.
11 | </h3>
12 | <p align="center">
13 |   But don’t worry! You can still: 
14 |   <a href="https://www.learnwithjason.dev/let-s-learn-vue-3"><strong>watch the video</strong></a> · 
15 |   <a href="https://vue-gift-list.netlify.app"><strong>see the demo</strong></a> · 
16 |   <a href="https://app.netlify.com/start/deploy?repository=https://github.com/learnwithjason/lets-learn-vue-3&utm_source=learnwithjason&utm_medium=github&utm_campaign=devex"><strong>deploy this project</strong></a> · 
17 |   <a href="https://jason.af/lwj/schedule"><strong>see upcoming episodes</strong></a>
18 | </p>
19 | 
20 | &nbsp;
21 | 
22 | VueJS has a great reputation, both as a community and as a framework. And in Vue 3, there’s even more to love! Ben Hong will teach us how we can get started building with Vue 3.
23 | 
24 | &nbsp;
25 | 
26 | ## More Information
27 | 
28 | - [Watch this app get built live + see links and additional resources][episode]
29 | - [Follow _Learn With Jason_ on Twitch][twitch] to watch future episodes live
30 | - [Add the _Learn With Jason_ schedule to your Google Calendar][cal]
31 | 
32 | &nbsp;
33 | <p align="center">
34 |   <a href="https://app.netlify.com/start/deploy?repository=https://github.com/learnwithjason/lets-learn-vue-3&utm_source=learnwithjason&utm_medium=github&utm_campaign=devex">
35 |     <img src="https://www.netlify.com/img/deploy/button.svg" alt="Deploy this project to Netlify" />
36 |   </a>
37 | </p>
38 | 
39 | [episode]: https://www.learnwithjason.dev/let-s-learn-vue-3
40 | [twitch]: https://jason.af/twitch
41 | [cal]: https://jason.af/lwj/cal


--------------------------------------------------------------------------------
/app/public/data.json:
--------------------------------------------------------------------------------
 1 | [
 2 |   {
 3 |     "id": "656d38cc-ea3c-4b69-904a-e589231eeab8",
 4 |     "label": "Teenage Mutant Ninja Turtles Pizza Thrower Vehicle",
 5 |     "image": "ninja-turtle-pizza-thrower.jpg",
 6 |     "votes": 0
 7 |   },
 8 |   {
 9 |     "id": "d0fd11da-a3c8-49fe-8d67-5bbec93fd530",
10 |     "label": "X-Men Cyclops Action Figure",
11 |     "image": "cyclops.jpg",
12 |     "votes": 0
13 |   },
14 |   {
15 |     "id": "9b49246c-6b51-4a78-953d-4b02562f266e",
16 |     "label": "Furby",
17 |     "image": "furby.jpg",
18 |     "votes": 0
19 |   },
20 |   {
21 |     "id": "81be53b3-6fe2-42d3-8a0a-5d43939ff6ca",
22 |     "label": "Beast Wars - Optimus Prime",
23 |     "image": "beast-wars.jpg",
24 |     "votes": 0
25 |   },
26 |   {
27 |     "id": "3ab16a1a-d1a7-455d-85e8-435fd734ba2b",
28 |     "label": "Transformers - Optimus Prime",
29 |     "image": "classic-optimus.jpg",
30 |     "votes": 0
31 |   },
32 |   {
33 |     "id": "6f034ad7-61c3-4b7b-a46e-5213300f1fbb",
34 |     "label": "Bop It Extreme",
35 |     "image": "bop-it-extreme.jpg",
36 |     "votes": 0
37 |   },
38 |   {
39 |     "id": "553d416c-5234-4f7a-8343-7d14375f0d6d",
40 |     "label": "Tamagotchi",
41 |     "image": "tamagotchi.jpg",
42 |     "votes": 0
43 |   },
44 |   {
45 |     "id": "8393040d-8a28-4cc2-ba73-27da8ff59497",
46 |     "label": "Rock 'Em Sock 'Em",
47 |     "image": "rock-em-sock-em.jpg",
48 |     "votes": 0
49 |   },
50 |   {
51 |     "id": "eb8d2264-ba96-461d-8db1-75c712222272",
52 |     "label": "Super Soaker",
53 |     "image": "super-soaker.png",
54 |     "votes": 0
55 |   },
56 |   {
57 |     "id": "8619a26c-ba59-4d95-8eba-fca879cb692f",
58 |     "label": "Pokemon Cards",
59 |     "image": "pokemon-cards.jpg",
60 |     "votes": 0
61 |   },
62 |   {
63 |     "id": "70beae3c-c7bb-4416-955f-de2a063d3f85",
64 |     "label": "Magic Mitt",
65 |     "image": "magic-mitt.png",
66 |     "votes": 0
67 |   },
68 |   {
69 |     "id": "3f5c4ccc-e5d2-479d-9184-122abe928ed8",
70 |     "label": "Nerf Blaster",
71 |     "image": "nerf-blaster.jpg",
72 |     "votes": 0
73 |   }
74 | ]
75 | 


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