├── .github └── FUNDING.yml ├── .gitignore ├── README.md ├── compapi-solution ├── .editorconfig ├── .gitignore ├── README.md ├── assets │ └── README.md ├── components │ ├── AppMenu.vue │ ├── Logo.vue │ └── README.md ├── layouts │ ├── README.md │ └── default.vue ├── middleware │ └── README.md ├── nuxt.config.js ├── package.json ├── package.json.bak ├── pages │ ├── README.md │ ├── index.vue │ └── tacofriends.vue ├── plugins │ ├── README.md │ └── composition-api.js ├── static │ ├── README.md │ └── favicon.ico ├── store │ └── README.md ├── tsconfig.json └── yarn.lock ├── compapi-start ├── .editorconfig ├── .gitignore ├── README.md ├── assets │ └── README.md ├── components │ ├── AppMenu.vue │ ├── Logo.vue │ └── README.md ├── layouts │ ├── README.md │ └── default.vue ├── middleware │ └── README.md ├── nuxt.config.js ├── package.json ├── package.json.bak ├── pages │ ├── README.md │ └── index.vue ├── plugins │ ├── README.md │ └── composition-api.js ├── static │ ├── README.md │ └── favicon.ico ├── store │ └── README.md ├── tsconfig.json └── yarn.lock ├── foodapp-finalvalidation ├── .editorconfig ├── .gitignore ├── README.md ├── assets │ ├── README.md │ ├── headerimg.jpg │ └── main.scss ├── components │ ├── AppEmptyCart.vue │ ├── AppFooter.vue │ ├── AppHeader.vue │ ├── AppLogo.vue │ ├── AppMenu.vue │ ├── AppRestaurantInfo.vue │ ├── AppSelect.vue │ ├── AppToast.vue │ └── README.md ├── layouts │ ├── README.md │ └── default.vue ├── middleware │ └── README.md ├── nuxt.config.js ├── package.json ├── pages │ ├── README.md │ ├── cart.vue │ ├── index.vue │ ├── item │ │ └── _id.vue │ └── restaurants.vue ├── plugins │ ├── README.md │ ├── getfood.server.js │ └── vuelidate.js ├── static │ ├── README.md │ ├── dimsum-eggplant.jpg │ ├── dimsum-shrimp.jpg │ ├── dimsum-soup.jpg │ ├── favicon.ico │ ├── pizza-meat.jpg │ ├── pizza-plain.jpg │ ├── pizza-veggie.jpg │ ├── taco-burrito.jpg │ ├── taco-quesadilla.png │ └── taco-taco.jpg ├── store │ ├── README.md │ └── index.js └── yarn.lock ├── foodapp-problem1 ├── .editorconfig ├── .gitignore ├── README.md ├── assets │ ├── README.md │ ├── headerimg.jpg │ └── main.scss ├── components │ ├── AppHeader.vue │ ├── AppMenu.vue │ ├── AppRestaurantInfo.vue │ └── README.md ├── layouts │ ├── README.md │ └── default.vue ├── middleware │ └── README.md ├── nuxt.config.js ├── package.json ├── pages │ ├── README.md │ └── index.vue ├── plugins │ └── README.md ├── static │ ├── README.md │ ├── dimsum-eggplant.jpg │ ├── dimsum-shrimp.jpg │ ├── dimsum-soup.jpg │ ├── favicon.ico │ ├── pizza-meat.jpg │ ├── pizza-plain.jpg │ ├── pizza-veggie.jpg │ ├── taco-burrito.jpg │ ├── taco-quesadilla.png │ └── taco-taco.jpg ├── store │ ├── README.md │ └── index.js └── yarn.lock ├── foodapp-problem2 ├── .editorconfig ├── .gitignore ├── README.md ├── assets │ ├── README.md │ ├── headerimg.jpg │ └── main.scss ├── components │ ├── AppFooter.vue │ ├── AppHeader.vue │ ├── AppMenu.vue │ ├── AppRestaurantInfo.vue │ ├── AppSelect.vue │ └── README.md ├── layouts │ ├── README.md │ └── default.vue ├── middleware │ └── README.md ├── nuxt.config.js ├── package.json ├── pages │ ├── README.md │ ├── index.vue │ ├── item │ │ └── _id.vue │ └── restaurants.vue ├── plugins │ ├── README.md │ └── getfood.server.js ├── static │ ├── README.md │ ├── dimsum-eggplant.jpg │ ├── dimsum-shrimp.jpg │ ├── dimsum-soup.jpg │ ├── favicon.ico │ ├── pizza-meat.jpg │ ├── pizza-plain.jpg │ ├── pizza-veggie.jpg │ ├── taco-burrito.jpg │ ├── taco-quesadilla.png │ └── taco-taco.jpg ├── store │ ├── README.md │ └── index.js └── yarn.lock ├── foodapp-problem3 ├── .editorconfig ├── .gitignore ├── README.md ├── assets │ ├── README.md │ ├── headerimg.jpg │ └── main.scss ├── components │ ├── AppFooter.vue │ ├── AppHeader.vue │ ├── AppLogo.vue │ ├── AppMenu.vue │ ├── AppRestaurantInfo.vue │ ├── AppSelect.vue │ ├── AppToast.vue │ └── README.md ├── layouts │ ├── README.md │ └── default.vue ├── middleware │ └── README.md ├── nuxt.config.js ├── package.json ├── pages │ ├── README.md │ ├── cart.vue │ ├── index.vue │ ├── item │ │ └── _id.vue │ └── restaurants.vue ├── plugins │ ├── README.md │ └── getfood.server.js ├── static │ ├── README.md │ ├── dimsum-eggplant.jpg │ ├── dimsum-shrimp.jpg │ ├── dimsum-soup.jpg │ ├── favicon.ico │ ├── pizza-meat.jpg │ ├── pizza-plain.jpg │ ├── pizza-veggie.jpg │ ├── taco-burrito.jpg │ ├── taco-quesadilla.png │ └── taco-taco.jpg ├── store │ ├── README.md │ └── index.js └── yarn.lock ├── foodapp-resources ├── env ├── fooddata.js ├── foodlogo.svg ├── headerimg.jpg ├── main.scss ├── noun_hungry_1092665.svg └── photoimgs │ ├── dimsum-eggplant.jpg │ ├── dimsum-shrimp.jpg │ ├── dimsum-soup.jpg │ ├── pizza-meat.jpg │ ├── pizza-plain.jpg │ ├── pizza-veggie.jpg │ ├── taco-burrito.jpg │ ├── taco-quesadilla.png │ └── taco-taco.jpg ├── foodapp-solution1 ├── .editorconfig ├── .gitignore ├── README.md ├── assets │ ├── README.md │ ├── headerimg.jpg │ └── main.scss ├── components │ ├── AppFooter.vue │ ├── AppHeader.vue │ ├── AppMenu.vue │ ├── AppRestaurantInfo.vue │ └── README.md ├── layouts │ ├── README.md │ └── default.vue ├── middleware │ └── README.md ├── nuxt.config.js ├── package.json ├── pages │ ├── README.md │ ├── index.vue │ └── restaurants.vue ├── plugins │ └── README.md ├── static │ ├── README.md │ ├── dimsum-eggplant.jpg │ ├── dimsum-shrimp.jpg │ ├── dimsum-soup.jpg │ ├── favicon.ico │ ├── pizza-meat.jpg │ ├── pizza-plain.jpg │ ├── pizza-veggie.jpg │ ├── taco-burrito.jpg │ ├── taco-quesadilla.png │ └── taco-taco.jpg ├── store │ ├── README.md │ └── index.js └── yarn.lock ├── foodapp-solution2 ├── .editorconfig ├── .gitignore ├── README.md ├── assets │ ├── README.md │ ├── headerimg.jpg │ └── main.scss ├── components │ ├── AppFooter.vue │ ├── AppHeader.vue │ ├── AppMenu.vue │ ├── AppRestaurantInfo.vue │ ├── AppSelect.vue │ └── README.md ├── layouts │ ├── README.md │ └── default.vue ├── middleware │ └── README.md ├── nuxt.config.js ├── package.json ├── pages │ ├── README.md │ ├── index.vue │ ├── item │ │ └── _id.vue │ └── restaurants.vue ├── plugins │ ├── README.md │ └── getfood.server.js ├── static │ ├── README.md │ ├── dimsum-eggplant.jpg │ ├── dimsum-shrimp.jpg │ ├── dimsum-soup.jpg │ ├── favicon.ico │ ├── pizza-meat.jpg │ ├── pizza-plain.jpg │ ├── pizza-veggie.jpg │ ├── taco-burrito.jpg │ ├── taco-quesadilla.png │ └── taco-taco.jpg ├── store │ ├── README.md │ └── index.js └── yarn.lock ├── foodapp-solution3 ├── .editorconfig ├── .gitignore ├── README.md ├── assets │ ├── README.md │ ├── headerimg.jpg │ └── main.scss ├── components │ ├── AppEmptyCart.vue │ ├── AppFooter.vue │ ├── AppHeader.vue │ ├── AppLogo.vue │ ├── AppMenu.vue │ ├── AppRestaurantInfo.vue │ ├── AppSelect.vue │ ├── AppToast.vue │ └── README.md ├── layouts │ ├── README.md │ └── default.vue ├── middleware │ └── README.md ├── nuxt.config.js ├── package.json ├── pages │ ├── README.md │ ├── cart.vue │ ├── index.vue │ ├── item │ │ └── _id.vue │ └── restaurants.vue ├── plugins │ ├── README.md │ └── getfood.server.js ├── static │ ├── README.md │ ├── dimsum-eggplant.jpg │ ├── dimsum-shrimp.jpg │ ├── dimsum-soup.jpg │ ├── favicon.ico │ ├── pizza-meat.jpg │ ├── pizza-plain.jpg │ ├── pizza-veggie.jpg │ ├── taco-burrito.jpg │ ├── taco-quesadilla.png │ └── taco-taco.jpg ├── store │ ├── README.md │ └── index.js └── yarn.lock ├── game-problem ├── .gitignore ├── README.md ├── babel.config.js ├── package.json ├── public │ ├── favicon.ico │ └── index.html ├── src │ ├── App.vue │ ├── assets │ │ ├── background.svg │ │ └── logo.png │ ├── components │ │ ├── Artist.vue │ │ ├── Baker.vue │ │ ├── Friend.vue │ │ ├── GamestateFinish.vue │ │ ├── GamestateStart.vue │ │ ├── Mechanic.vue │ │ ├── Score.vue │ │ └── Zombie.vue │ ├── main.js │ └── store │ │ └── index.js └── yarn.lock ├── game-solution ├── .gitignore ├── README.md ├── babel.config.js ├── package.json ├── public │ ├── favicon.ico │ └── index.html ├── src │ ├── App.vue │ ├── assets │ │ ├── background.svg │ │ └── logo.png │ ├── components │ │ ├── Artist.vue │ │ ├── Baker.vue │ │ ├── Friend.vue │ │ ├── GamestateFinish.vue │ │ ├── GamestateStart.vue │ │ ├── Mechanic.vue │ │ ├── Score.vue │ │ └── Zombie.vue │ ├── main.js │ └── store │ │ └── index.js └── yarn.lock └── gameresources ├── alienzombie-original-source.svg ├── components ├── Artist.vue ├── Baker.vue ├── Friend.vue ├── Mechanic.vue ├── Score.vue └── Zombie.vue ├── graphics ├── background.svg ├── basesvg.svg └── face.svg ├── intro.html ├── main.scss └── questions.js /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | github: [sdras] 2 | -------------------------------------------------------------------------------- /compapi-solution/.editorconfig: -------------------------------------------------------------------------------- 1 | # editorconfig.org 2 | root = true 3 | 4 | [*] 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | charset = utf-8 9 | trim_trailing_whitespace = true 10 | insert_final_newline = true 11 | 12 | [*.md] 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /compapi-solution/.gitignore: -------------------------------------------------------------------------------- 1 | # Created by .ignore support plugin (hsz.mobi) 2 | ### Node template 3 | # Logs 4 | /logs 5 | *.log 6 | npm-debug.log* 7 | yarn-debug.log* 8 | yarn-error.log* 9 | 10 | # Runtime data 11 | pids 12 | *.pid 13 | *.seed 14 | *.pid.lock 15 | 16 | # Directory for instrumented libs generated by jscoverage/JSCover 17 | lib-cov 18 | 19 | # Coverage directory used by tools like istanbul 20 | coverage 21 | 22 | # nyc test coverage 23 | .nyc_output 24 | 25 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 26 | .grunt 27 | 28 | # Bower dependency directory (https://bower.io/) 29 | bower_components 30 | 31 | # node-waf configuration 32 | .lock-wscript 33 | 34 | # Compiled binary addons (https://nodejs.org/api/addons.html) 35 | build/Release 36 | 37 | # Dependency directories 38 | node_modules/ 39 | jspm_packages/ 40 | 41 | # TypeScript v1 declaration files 42 | typings/ 43 | 44 | # Optional npm cache directory 45 | .npm 46 | 47 | # Optional eslint cache 48 | .eslintcache 49 | 50 | # Optional REPL history 51 | .node_repl_history 52 | 53 | # Output of 'npm pack' 54 | *.tgz 55 | 56 | # Yarn Integrity file 57 | .yarn-integrity 58 | 59 | # dotenv environment variables file 60 | .env 61 | 62 | # parcel-bundler cache (https://parceljs.org/) 63 | .cache 64 | 65 | # next.js build output 66 | .next 67 | 68 | # nuxt.js build output 69 | .nuxt 70 | 71 | # Nuxt generate 72 | dist 73 | 74 | # vuepress build output 75 | .vuepress/dist 76 | 77 | # Serverless directories 78 | .serverless 79 | 80 | # IDE / Editor 81 | .idea 82 | 83 | # Service worker 84 | sw.* 85 | 86 | # macOS 87 | .DS_Store 88 | 89 | # Vim swap files 90 | *.swp 91 | -------------------------------------------------------------------------------- /compapi-solution/README.md: -------------------------------------------------------------------------------- 1 | # compapi 2 | 3 | ## Build Setup 4 | 5 | ```bash 6 | # install dependencies 7 | $ yarn install 8 | 9 | # serve with hot reload at localhost:3000 10 | $ yarn dev 11 | 12 | # build for production and launch server 13 | $ yarn build 14 | $ yarn start 15 | 16 | # generate static project 17 | $ yarn generate 18 | ``` 19 | 20 | For detailed explanation on how things work, check out [Nuxt.js docs](https://nuxtjs.org). 21 | -------------------------------------------------------------------------------- /compapi-solution/assets/README.md: -------------------------------------------------------------------------------- 1 | # ASSETS 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains your un-compiled assets such as LESS, SASS, or JavaScript. 6 | 7 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/assets#webpacked). 8 | -------------------------------------------------------------------------------- /compapi-solution/components/AppMenu.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 17 | 18 | 42 | -------------------------------------------------------------------------------- /compapi-solution/components/Logo.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | 30 | -------------------------------------------------------------------------------- /compapi-solution/components/README.md: -------------------------------------------------------------------------------- 1 | # COMPONENTS 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | The components directory contains your Vue.js Components. 6 | 7 | _Nuxt.js doesn't supercharge these components._ 8 | -------------------------------------------------------------------------------- /compapi-solution/layouts/README.md: -------------------------------------------------------------------------------- 1 | # LAYOUTS 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains your Application Layouts. 6 | 7 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/views#layouts). 8 | -------------------------------------------------------------------------------- /compapi-solution/layouts/default.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 17 | 18 | 64 | -------------------------------------------------------------------------------- /compapi-solution/middleware/README.md: -------------------------------------------------------------------------------- 1 | # MIDDLEWARE 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains your application middleware. 6 | Middleware let you define custom functions that can be run before rendering either a page or a group of pages. 7 | 8 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/routing#middleware). 9 | -------------------------------------------------------------------------------- /compapi-solution/nuxt.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | /* 3 | ** Nuxt rendering mode 4 | ** See https://nuxtjs.org/api/configuration-mode 5 | */ 6 | mode: "universal", 7 | /* 8 | ** Nuxt target 9 | ** See https://nuxtjs.org/api/configuration-target 10 | */ 11 | target: "static", 12 | /* 13 | ** Headers of the page 14 | ** See https://nuxtjs.org/api/configuration-head 15 | */ 16 | head: { 17 | title: process.env.npm_package_name || "", 18 | meta: [ 19 | { charset: "utf-8" }, 20 | { name: "viewport", content: "width=device-width, initial-scale=1" }, 21 | { 22 | hid: "description", 23 | name: "description", 24 | content: process.env.npm_package_description || "" 25 | } 26 | ], 27 | link: [{ rel: "icon", type: "image/x-icon", href: "/favicon.ico" }] 28 | }, 29 | /* 30 | ** Global CSS 31 | */ 32 | css: [], 33 | /* 34 | ** Plugins to load before mounting the App 35 | ** https://nuxtjs.org/guide/plugins 36 | */ 37 | plugins: ["~/plugins/composition-api.js"], 38 | /* 39 | ** Auto import components 40 | ** See https://nuxtjs.org/api/configuration-components 41 | */ 42 | components: true, 43 | /* 44 | ** Nuxt.js dev-modules 45 | */ 46 | buildModules: ["@nuxt/typescript-build"], 47 | /* 48 | ** Nuxt.js modules 49 | */ 50 | modules: [], 51 | /* 52 | ** Build configuration 53 | ** See https://nuxtjs.org/api/configuration-build/ 54 | */ 55 | build: {} 56 | }; 57 | -------------------------------------------------------------------------------- /compapi-solution/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "compapi", 3 | "version": "1.0.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "nuxt", 7 | "build": "nuxt build", 8 | "start": "nuxt start", 9 | "generate": "nuxt generate" 10 | }, 11 | "dependencies": { 12 | "@vue/composition-api": "latest", 13 | "nuxt": "latest", 14 | "node-sass": "^4.14.1", 15 | "sass-loader": "^9.0.3", 16 | "uuid": "^8.3.0", 17 | "vuelidate": "^0.7.5" 18 | }, 19 | "devDependencies": { 20 | "@nuxt/types": "latest", 21 | "@nuxt/typescript-build": "latest" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /compapi-solution/package.json.bak: -------------------------------------------------------------------------------- 1 | { 2 | "name": "compapi", 3 | "version": "1.0.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "nuxt", 7 | "build": "nuxt build", 8 | "start": "nuxt start", 9 | "generate": "nuxt generate" 10 | }, 11 | "dependencies": { 12 | "@vue/composition-api": "latest", 13 | "nuxt": "latest", 14 | "node-sass": "^4.14.1", 15 | "sass-loader": "^9.0.3" 16 | }, 17 | "devDependencies": { 18 | "@nuxt/types": "latest", 19 | "@nuxt/typescript-build": "latest" 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /compapi-solution/pages/README.md: -------------------------------------------------------------------------------- 1 | # PAGES 2 | 3 | This directory contains your Application Views and Routes. 4 | The framework reads all the `*.vue` files inside this directory and creates the router of your application. 5 | 6 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/routing). 7 | -------------------------------------------------------------------------------- /compapi-solution/pages/index.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 31 | -------------------------------------------------------------------------------- /compapi-solution/pages/tacofriends.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 37 | 38 | 56 | -------------------------------------------------------------------------------- /compapi-solution/plugins/README.md: -------------------------------------------------------------------------------- 1 | # PLUGINS 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains Javascript plugins that you want to run before mounting the root Vue.js application. 6 | 7 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/plugins). 8 | -------------------------------------------------------------------------------- /compapi-solution/plugins/composition-api.js: -------------------------------------------------------------------------------- 1 | import Vue from "vue"; 2 | import VueCompositionApi from "@vue/composition-api"; 3 | 4 | Vue.use(VueCompositionApi); 5 | -------------------------------------------------------------------------------- /compapi-solution/static/README.md: -------------------------------------------------------------------------------- 1 | # STATIC 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains your static files. 6 | Each file inside this directory is mapped to `/`. 7 | Thus you'd want to delete this README.md before deploying to production. 8 | 9 | Example: `/static/robots.txt` is mapped as `/robots.txt`. 10 | 11 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/assets#static). 12 | -------------------------------------------------------------------------------- /compapi-solution/static/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sdras/building-web-apps-with-vue/569c837a70ae27014cb4d61c22c77c4efa2e0c39/compapi-solution/static/favicon.ico -------------------------------------------------------------------------------- /compapi-solution/store/README.md: -------------------------------------------------------------------------------- 1 | # STORE 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains your Vuex Store files. 6 | Vuex Store option is implemented in the Nuxt.js framework. 7 | 8 | Creating a file in this directory automatically activates the option in the framework. 9 | 10 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/vuex-store). 11 | -------------------------------------------------------------------------------- /compapi-solution/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ES2018", 4 | "module": "ESNext", 5 | "moduleResolution": "Node", 6 | "lib": ["ESNext", "ESNext.AsyncIterable", "DOM"], 7 | "esModuleInterop": true, 8 | "allowJs": true, 9 | "sourceMap": true, 10 | "strict": true, 11 | "noEmit": true, 12 | "baseUrl": ".", 13 | "paths": { 14 | "~/*": ["./*"], 15 | "@/*": ["./*"] 16 | }, 17 | "types": ["@nuxt/types"] 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /compapi-start/.editorconfig: -------------------------------------------------------------------------------- 1 | # editorconfig.org 2 | root = true 3 | 4 | [*] 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | charset = utf-8 9 | trim_trailing_whitespace = true 10 | insert_final_newline = true 11 | 12 | [*.md] 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /compapi-start/.gitignore: -------------------------------------------------------------------------------- 1 | # Created by .ignore support plugin (hsz.mobi) 2 | ### Node template 3 | # Logs 4 | /logs 5 | *.log 6 | npm-debug.log* 7 | yarn-debug.log* 8 | yarn-error.log* 9 | 10 | # Runtime data 11 | pids 12 | *.pid 13 | *.seed 14 | *.pid.lock 15 | 16 | # Directory for instrumented libs generated by jscoverage/JSCover 17 | lib-cov 18 | 19 | # Coverage directory used by tools like istanbul 20 | coverage 21 | 22 | # nyc test coverage 23 | .nyc_output 24 | 25 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 26 | .grunt 27 | 28 | # Bower dependency directory (https://bower.io/) 29 | bower_components 30 | 31 | # node-waf configuration 32 | .lock-wscript 33 | 34 | # Compiled binary addons (https://nodejs.org/api/addons.html) 35 | build/Release 36 | 37 | # Dependency directories 38 | node_modules/ 39 | jspm_packages/ 40 | 41 | # TypeScript v1 declaration files 42 | typings/ 43 | 44 | # Optional npm cache directory 45 | .npm 46 | 47 | # Optional eslint cache 48 | .eslintcache 49 | 50 | # Optional REPL history 51 | .node_repl_history 52 | 53 | # Output of 'npm pack' 54 | *.tgz 55 | 56 | # Yarn Integrity file 57 | .yarn-integrity 58 | 59 | # dotenv environment variables file 60 | .env 61 | 62 | # parcel-bundler cache (https://parceljs.org/) 63 | .cache 64 | 65 | # next.js build output 66 | .next 67 | 68 | # nuxt.js build output 69 | .nuxt 70 | 71 | # Nuxt generate 72 | dist 73 | 74 | # vuepress build output 75 | .vuepress/dist 76 | 77 | # Serverless directories 78 | .serverless 79 | 80 | # IDE / Editor 81 | .idea 82 | 83 | # Service worker 84 | sw.* 85 | 86 | # macOS 87 | .DS_Store 88 | 89 | # Vim swap files 90 | *.swp 91 | -------------------------------------------------------------------------------- /compapi-start/README.md: -------------------------------------------------------------------------------- 1 | # compapi 2 | 3 | ## Build Setup 4 | 5 | ```bash 6 | # install dependencies 7 | $ yarn install 8 | 9 | # serve with hot reload at localhost:3000 10 | $ yarn dev 11 | 12 | # build for production and launch server 13 | $ yarn build 14 | $ yarn start 15 | 16 | # generate static project 17 | $ yarn generate 18 | ``` 19 | 20 | For detailed explanation on how things work, check out [Nuxt.js docs](https://nuxtjs.org). 21 | -------------------------------------------------------------------------------- /compapi-start/assets/README.md: -------------------------------------------------------------------------------- 1 | # ASSETS 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains your un-compiled assets such as LESS, SASS, or JavaScript. 6 | 7 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/assets#webpacked). 8 | -------------------------------------------------------------------------------- /compapi-start/components/AppMenu.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 14 | 15 | 39 | -------------------------------------------------------------------------------- /compapi-start/components/Logo.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | 30 | -------------------------------------------------------------------------------- /compapi-start/components/README.md: -------------------------------------------------------------------------------- 1 | # COMPONENTS 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | The components directory contains your Vue.js Components. 6 | 7 | _Nuxt.js doesn't supercharge these components._ 8 | -------------------------------------------------------------------------------- /compapi-start/layouts/README.md: -------------------------------------------------------------------------------- 1 | # LAYOUTS 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains your Application Layouts. 6 | 7 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/views#layouts). 8 | -------------------------------------------------------------------------------- /compapi-start/layouts/default.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 17 | 18 | 64 | -------------------------------------------------------------------------------- /compapi-start/middleware/README.md: -------------------------------------------------------------------------------- 1 | # MIDDLEWARE 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains your application middleware. 6 | Middleware let you define custom functions that can be run before rendering either a page or a group of pages. 7 | 8 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/routing#middleware). 9 | -------------------------------------------------------------------------------- /compapi-start/nuxt.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | /* 3 | ** Nuxt rendering mode 4 | ** See https://nuxtjs.org/api/configuration-mode 5 | */ 6 | mode: "universal", 7 | /* 8 | ** Nuxt target 9 | ** See https://nuxtjs.org/api/configuration-target 10 | */ 11 | target: "static", 12 | /* 13 | ** Headers of the page 14 | ** See https://nuxtjs.org/api/configuration-head 15 | */ 16 | head: { 17 | title: process.env.npm_package_name || "", 18 | meta: [ 19 | { charset: "utf-8" }, 20 | { name: "viewport", content: "width=device-width, initial-scale=1" }, 21 | { 22 | hid: "description", 23 | name: "description", 24 | content: process.env.npm_package_description || "" 25 | } 26 | ], 27 | link: [{ rel: "icon", type: "image/x-icon", href: "/favicon.ico" }] 28 | }, 29 | /* 30 | ** Global CSS 31 | */ 32 | css: [], 33 | /* 34 | ** Plugins to load before mounting the App 35 | ** https://nuxtjs.org/guide/plugins 36 | */ 37 | plugins: ["~/plugins/composition-api.js"], 38 | /* 39 | ** Auto import components 40 | ** See https://nuxtjs.org/api/configuration-components 41 | */ 42 | components: true, 43 | /* 44 | ** Nuxt.js dev-modules 45 | */ 46 | buildModules: ["@nuxt/typescript-build"], 47 | /* 48 | ** Nuxt.js modules 49 | */ 50 | modules: [], 51 | /* 52 | ** Build configuration 53 | ** See https://nuxtjs.org/api/configuration-build/ 54 | */ 55 | build: {} 56 | }; 57 | -------------------------------------------------------------------------------- /compapi-start/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "compapi", 3 | "version": "1.0.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "nuxt", 7 | "build": "nuxt build", 8 | "start": "nuxt start", 9 | "generate": "nuxt generate" 10 | }, 11 | "dependencies": { 12 | "@vue/composition-api": "latest", 13 | "nuxt": "latest", 14 | "node-sass": "^4.14.1", 15 | "sass-loader": "^9.0.3", 16 | "uuid": "^8.3.0", 17 | "vuelidate": "^0.7.5" 18 | }, 19 | "devDependencies": { 20 | "@nuxt/types": "latest", 21 | "@nuxt/typescript-build": "latest" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /compapi-start/package.json.bak: -------------------------------------------------------------------------------- 1 | { 2 | "name": "compapi", 3 | "version": "1.0.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "nuxt", 7 | "build": "nuxt build", 8 | "start": "nuxt start", 9 | "generate": "nuxt generate" 10 | }, 11 | "dependencies": { 12 | "@vue/composition-api": "latest", 13 | "nuxt": "latest", 14 | "node-sass": "^4.14.1", 15 | "sass-loader": "^9.0.3" 16 | }, 17 | "devDependencies": { 18 | "@nuxt/types": "latest", 19 | "@nuxt/typescript-build": "latest" 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /compapi-start/pages/README.md: -------------------------------------------------------------------------------- 1 | # PAGES 2 | 3 | This directory contains your Application Views and Routes. 4 | The framework reads all the `*.vue` files inside this directory and creates the router of your application. 5 | 6 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/routing). 7 | -------------------------------------------------------------------------------- /compapi-start/pages/index.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 31 | -------------------------------------------------------------------------------- /compapi-start/plugins/README.md: -------------------------------------------------------------------------------- 1 | # PLUGINS 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains Javascript plugins that you want to run before mounting the root Vue.js application. 6 | 7 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/plugins). 8 | -------------------------------------------------------------------------------- /compapi-start/plugins/composition-api.js: -------------------------------------------------------------------------------- 1 | import Vue from "vue"; 2 | import VueCompositionApi from "@vue/composition-api"; 3 | 4 | Vue.use(VueCompositionApi); 5 | -------------------------------------------------------------------------------- /compapi-start/static/README.md: -------------------------------------------------------------------------------- 1 | # STATIC 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains your static files. 6 | Each file inside this directory is mapped to `/`. 7 | Thus you'd want to delete this README.md before deploying to production. 8 | 9 | Example: `/static/robots.txt` is mapped as `/robots.txt`. 10 | 11 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/assets#static). 12 | -------------------------------------------------------------------------------- /compapi-start/static/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sdras/building-web-apps-with-vue/569c837a70ae27014cb4d61c22c77c4efa2e0c39/compapi-start/static/favicon.ico -------------------------------------------------------------------------------- /compapi-start/store/README.md: -------------------------------------------------------------------------------- 1 | # STORE 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains your Vuex Store files. 6 | Vuex Store option is implemented in the Nuxt.js framework. 7 | 8 | Creating a file in this directory automatically activates the option in the framework. 9 | 10 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/vuex-store). 11 | -------------------------------------------------------------------------------- /compapi-start/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ES2018", 4 | "module": "ESNext", 5 | "moduleResolution": "Node", 6 | "lib": ["ESNext", "ESNext.AsyncIterable", "DOM"], 7 | "esModuleInterop": true, 8 | "allowJs": true, 9 | "sourceMap": true, 10 | "strict": true, 11 | "noEmit": true, 12 | "baseUrl": ".", 13 | "paths": { 14 | "~/*": ["./*"], 15 | "@/*": ["./*"] 16 | }, 17 | "types": ["@nuxt/types"] 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /foodapp-finalvalidation/.editorconfig: -------------------------------------------------------------------------------- 1 | # editorconfig.org 2 | root = true 3 | 4 | [*] 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | charset = utf-8 9 | trim_trailing_whitespace = true 10 | insert_final_newline = true 11 | 12 | [*.md] 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /foodapp-finalvalidation/.gitignore: -------------------------------------------------------------------------------- 1 | # Created by .ignore support plugin (hsz.mobi) 2 | ### Node template 3 | # Logs 4 | /logs 5 | *.log 6 | npm-debug.log* 7 | yarn-debug.log* 8 | yarn-error.log* 9 | 10 | # Runtime data 11 | pids 12 | *.pid 13 | *.seed 14 | *.pid.lock 15 | 16 | # Directory for instrumented libs generated by jscoverage/JSCover 17 | lib-cov 18 | 19 | # Coverage directory used by tools like istanbul 20 | coverage 21 | 22 | # nyc test coverage 23 | .nyc_output 24 | 25 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 26 | .grunt 27 | 28 | # Bower dependency directory (https://bower.io/) 29 | bower_components 30 | 31 | # node-waf configuration 32 | .lock-wscript 33 | 34 | # Compiled binary addons (https://nodejs.org/api/addons.html) 35 | build/Release 36 | 37 | # Dependency directories 38 | node_modules/ 39 | jspm_packages/ 40 | 41 | # TypeScript v1 declaration files 42 | typings/ 43 | 44 | # Optional npm cache directory 45 | .npm 46 | 47 | # Optional eslint cache 48 | .eslintcache 49 | 50 | # Optional REPL history 51 | .node_repl_history 52 | 53 | # Output of 'npm pack' 54 | *.tgz 55 | 56 | # Yarn Integrity file 57 | .yarn-integrity 58 | 59 | # dotenv environment variables file 60 | .env 61 | 62 | # parcel-bundler cache (https://parceljs.org/) 63 | .cache 64 | 65 | # next.js build output 66 | .next 67 | 68 | # nuxt.js build output 69 | .nuxt 70 | 71 | # Nuxt generate 72 | dist 73 | 74 | # vuepress build output 75 | .vuepress/dist 76 | 77 | # Serverless directories 78 | .serverless 79 | 80 | # IDE / Editor 81 | .idea 82 | 83 | # Service worker 84 | sw.* 85 | 86 | # macOS 87 | .DS_Store 88 | 89 | # Vim swap files 90 | *.swp 91 | -------------------------------------------------------------------------------- /foodapp-finalvalidation/assets/README.md: -------------------------------------------------------------------------------- 1 | # ASSETS 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains your un-compiled assets such as LESS, SASS, or JavaScript. 6 | 7 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/assets#webpacked). 8 | -------------------------------------------------------------------------------- /foodapp-finalvalidation/assets/headerimg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sdras/building-web-apps-with-vue/569c837a70ae27014cb4d61c22c77c4efa2e0c39/foodapp-finalvalidation/assets/headerimg.jpg -------------------------------------------------------------------------------- /foodapp-finalvalidation/components/AppEmptyCart.vue: -------------------------------------------------------------------------------- 1 | 25 | 26 | 35 | 36 | 37 | -------------------------------------------------------------------------------- /foodapp-finalvalidation/components/AppFooter.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | -------------------------------------------------------------------------------- /foodapp-finalvalidation/components/AppHeader.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 17 | 18 | 46 | -------------------------------------------------------------------------------- /foodapp-finalvalidation/components/AppLogo.vue: -------------------------------------------------------------------------------- 1 | 27 | 28 | 31 | 32 | 58 | -------------------------------------------------------------------------------- /foodapp-finalvalidation/components/AppMenu.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /foodapp-finalvalidation/components/AppRestaurantInfo.vue: -------------------------------------------------------------------------------- 1 | 31 | 32 | 46 | 47 | 49 | -------------------------------------------------------------------------------- /foodapp-finalvalidation/components/AppSelect.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /foodapp-finalvalidation/components/AppToast.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 10 | 11 | 13 | -------------------------------------------------------------------------------- /foodapp-finalvalidation/components/README.md: -------------------------------------------------------------------------------- 1 | # COMPONENTS 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | The components directory contains your Vue.js Components. 6 | 7 | _Nuxt.js doesn't supercharge these components._ 8 | -------------------------------------------------------------------------------- /foodapp-finalvalidation/layouts/README.md: -------------------------------------------------------------------------------- 1 | # LAYOUTS 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains your Application Layouts. 6 | 7 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/views#layouts). 8 | -------------------------------------------------------------------------------- /foodapp-finalvalidation/layouts/default.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 22 | 23 | 52 | -------------------------------------------------------------------------------- /foodapp-finalvalidation/middleware/README.md: -------------------------------------------------------------------------------- 1 | # MIDDLEWARE 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains your application middleware. 6 | Middleware let you define custom functions that can be run before rendering either a page or a group of pages. 7 | 8 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/routing#middleware). 9 | -------------------------------------------------------------------------------- /foodapp-finalvalidation/nuxt.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | /* 3 | ** Nuxt rendering mode 4 | ** See https://nuxtjs.org/api/configuration-mode 5 | */ 6 | mode: "universal", 7 | /* 8 | ** Nuxt target 9 | ** See https://nuxtjs.org/api/configuration-target 10 | */ 11 | target: "static", 12 | /* 13 | ** Headers of the page 14 | ** See https://nuxtjs.org/api/configuration-head 15 | */ 16 | head: { 17 | title: "Nuxt Food App", 18 | meta: [{ 19 | charset: "utf-8" 20 | }, 21 | { 22 | name: "viewport", 23 | content: "width=device-width, initial-scale=1" 24 | }, 25 | { 26 | hid: "description", 27 | name: "description", 28 | content: "Demo of Nuxt and Vue" 29 | } 30 | ], 31 | link: [{ 32 | rel: "icon", 33 | type: "image/x-icon", 34 | href: "/favicon.ico" 35 | }, 36 | { 37 | rel: "stylesheet", 38 | href: "https://fonts.googleapis.com/css2?family=Mulish:wght@300&family=Poppins:wght@600&display=swap" 39 | } 40 | ] 41 | }, 42 | /* 43 | ** Global CSS 44 | */ 45 | css: ["~/assets/main.scss"], 46 | /* 47 | ** Plugins to load before mounting the App 48 | ** https://nuxtjs.org/guide/plugins 49 | */ 50 | plugins: ["~/plugins/getfood.server.js", "~/plugins/vuelidate.js"], 51 | /* 52 | ** Auto import components 53 | ** See https://nuxtjs.org/api/configuration-components 54 | */ 55 | components: true, 56 | /* 57 | ** Nuxt.js dev-modules 58 | */ 59 | buildModules: [], 60 | /* 61 | ** Nuxt.js modules 62 | */ 63 | modules: [], 64 | /* 65 | ** Build configuration 66 | ** See https://nuxtjs.org/api/configuration-build/ 67 | */ 68 | build: {} 69 | }; 70 | -------------------------------------------------------------------------------- /foodapp-finalvalidation/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "foodapp", 3 | "version": "1.0.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "nuxt", 7 | "build": "nuxt build", 8 | "start": "nuxt start", 9 | "generate": "nuxt generate" 10 | }, 11 | "dependencies": { 12 | "@vue/composition-api": "^1.0.0-beta.10", 13 | "node-sass": "^4.14.1", 14 | "nuxt": "^2.14.0", 15 | "sass-loader": "^9.0.3", 16 | "uuid": "^8.3.0", 17 | "vuelidate": "^0.7.5" 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /foodapp-finalvalidation/pages/README.md: -------------------------------------------------------------------------------- 1 | # PAGES 2 | 3 | This directory contains your Application Views and Routes. 4 | The framework reads all the `*.vue` files inside this directory and creates the router of your application. 5 | 6 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/routing). 7 | -------------------------------------------------------------------------------- /foodapp-finalvalidation/pages/cart.vue: -------------------------------------------------------------------------------- 1 | 40 | 41 | 58 | 59 | 60 | -------------------------------------------------------------------------------- /foodapp-finalvalidation/pages/index.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /foodapp-finalvalidation/pages/restaurants.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 44 | 45 | 47 | -------------------------------------------------------------------------------- /foodapp-finalvalidation/plugins/README.md: -------------------------------------------------------------------------------- 1 | # PLUGINS 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains Javascript plugins that you want to run before mounting the root Vue.js application. 6 | 7 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/plugins). 8 | -------------------------------------------------------------------------------- /foodapp-finalvalidation/plugins/getfood.server.js: -------------------------------------------------------------------------------- 1 | export default async ({ 2 | store 3 | }) => { 4 | await store.dispatch('getFoodData') 5 | } 6 | -------------------------------------------------------------------------------- /foodapp-finalvalidation/plugins/vuelidate.js: -------------------------------------------------------------------------------- 1 | import Vue from "vue"; 2 | import Vuelidate from "vuelidate"; 3 | 4 | Vue.use(Vuelidate); 5 | -------------------------------------------------------------------------------- /foodapp-finalvalidation/static/README.md: -------------------------------------------------------------------------------- 1 | # STATIC 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains your static files. 6 | Each file inside this directory is mapped to `/`. 7 | Thus you'd want to delete this README.md before deploying to production. 8 | 9 | Example: `/static/robots.txt` is mapped as `/robots.txt`. 10 | 11 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/assets#static). 12 | -------------------------------------------------------------------------------- /foodapp-finalvalidation/static/dimsum-eggplant.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sdras/building-web-apps-with-vue/569c837a70ae27014cb4d61c22c77c4efa2e0c39/foodapp-finalvalidation/static/dimsum-eggplant.jpg -------------------------------------------------------------------------------- /foodapp-finalvalidation/static/dimsum-shrimp.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sdras/building-web-apps-with-vue/569c837a70ae27014cb4d61c22c77c4efa2e0c39/foodapp-finalvalidation/static/dimsum-shrimp.jpg -------------------------------------------------------------------------------- /foodapp-finalvalidation/static/dimsum-soup.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sdras/building-web-apps-with-vue/569c837a70ae27014cb4d61c22c77c4efa2e0c39/foodapp-finalvalidation/static/dimsum-soup.jpg -------------------------------------------------------------------------------- /foodapp-finalvalidation/static/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sdras/building-web-apps-with-vue/569c837a70ae27014cb4d61c22c77c4efa2e0c39/foodapp-finalvalidation/static/favicon.ico -------------------------------------------------------------------------------- /foodapp-finalvalidation/static/pizza-meat.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sdras/building-web-apps-with-vue/569c837a70ae27014cb4d61c22c77c4efa2e0c39/foodapp-finalvalidation/static/pizza-meat.jpg -------------------------------------------------------------------------------- /foodapp-finalvalidation/static/pizza-plain.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sdras/building-web-apps-with-vue/569c837a70ae27014cb4d61c22c77c4efa2e0c39/foodapp-finalvalidation/static/pizza-plain.jpg -------------------------------------------------------------------------------- /foodapp-finalvalidation/static/pizza-veggie.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sdras/building-web-apps-with-vue/569c837a70ae27014cb4d61c22c77c4efa2e0c39/foodapp-finalvalidation/static/pizza-veggie.jpg -------------------------------------------------------------------------------- /foodapp-finalvalidation/static/taco-burrito.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sdras/building-web-apps-with-vue/569c837a70ae27014cb4d61c22c77c4efa2e0c39/foodapp-finalvalidation/static/taco-burrito.jpg -------------------------------------------------------------------------------- /foodapp-finalvalidation/static/taco-quesadilla.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sdras/building-web-apps-with-vue/569c837a70ae27014cb4d61c22c77c4efa2e0c39/foodapp-finalvalidation/static/taco-quesadilla.png -------------------------------------------------------------------------------- /foodapp-finalvalidation/static/taco-taco.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sdras/building-web-apps-with-vue/569c837a70ae27014cb4d61c22c77c4efa2e0c39/foodapp-finalvalidation/static/taco-taco.jpg -------------------------------------------------------------------------------- /foodapp-finalvalidation/store/README.md: -------------------------------------------------------------------------------- 1 | # STORE 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains your Vuex Store files. 6 | Vuex Store option is implemented in the Nuxt.js framework. 7 | 8 | Creating a file in this directory automatically activates the option in the framework. 9 | 10 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/vuex-store). 11 | -------------------------------------------------------------------------------- /foodapp-finalvalidation/store/index.js: -------------------------------------------------------------------------------- 1 | import { 2 | v4 as uuidv4 3 | } from "uuid"; 4 | 5 | export const state = () => ({ 6 | cart: [], 7 | fooddata: [] 8 | }); 9 | 10 | export const getters = { 11 | cartCount: state => { 12 | if (!state.cart.length) return 0; 13 | return state.cart.reduce((ac, next) => ac + +next.count, 0); 14 | }, 15 | totalPrice: state => { 16 | if (!state.cart.length) return 0; 17 | return state.cart.reduce((ac, next) => ac + +next.combinedPrice, 0); 18 | } 19 | }; 20 | 21 | export const mutations = { 22 | addToCart: (state, formOutput) => { 23 | formOutput.id = uuidv4(); 24 | state.cart.push(formOutput); 25 | }, 26 | updateFoodData: (state, data) => { 27 | state.fooddata = data; 28 | } 29 | }; 30 | 31 | export const actions = { 32 | async getFoodData({ 33 | state, 34 | commit 35 | }) { 36 | if (state.fooddata.length) return; 37 | 38 | try { 39 | await fetch( 40 | "https://dva9vm8f1h.execute-api.us-east-2.amazonaws.com/production/restaurants", { 41 | headers: { 42 | "Content-Type": "application/json", 43 | "x-api-key": process.env.AWS_API_KEY 44 | } 45 | } 46 | ) 47 | .then(response => response.json()) 48 | .then(data => { 49 | commit("updateFoodData", data); 50 | }); 51 | } catch (err) { 52 | console.log(err); 53 | } 54 | } 55 | }; 56 | -------------------------------------------------------------------------------- /foodapp-problem1/.editorconfig: -------------------------------------------------------------------------------- 1 | # editorconfig.org 2 | root = true 3 | 4 | [*] 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | charset = utf-8 9 | trim_trailing_whitespace = true 10 | insert_final_newline = true 11 | 12 | [*.md] 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /foodapp-problem1/.gitignore: -------------------------------------------------------------------------------- 1 | # Created by .ignore support plugin (hsz.mobi) 2 | ### Node template 3 | # Logs 4 | /logs 5 | *.log 6 | npm-debug.log* 7 | yarn-debug.log* 8 | yarn-error.log* 9 | 10 | # Runtime data 11 | pids 12 | *.pid 13 | *.seed 14 | *.pid.lock 15 | 16 | # Directory for instrumented libs generated by jscoverage/JSCover 17 | lib-cov 18 | 19 | # Coverage directory used by tools like istanbul 20 | coverage 21 | 22 | # nyc test coverage 23 | .nyc_output 24 | 25 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 26 | .grunt 27 | 28 | # Bower dependency directory (https://bower.io/) 29 | bower_components 30 | 31 | # node-waf configuration 32 | .lock-wscript 33 | 34 | # Compiled binary addons (https://nodejs.org/api/addons.html) 35 | build/Release 36 | 37 | # Dependency directories 38 | node_modules/ 39 | jspm_packages/ 40 | 41 | # TypeScript v1 declaration files 42 | typings/ 43 | 44 | # Optional npm cache directory 45 | .npm 46 | 47 | # Optional eslint cache 48 | .eslintcache 49 | 50 | # Optional REPL history 51 | .node_repl_history 52 | 53 | # Output of 'npm pack' 54 | *.tgz 55 | 56 | # Yarn Integrity file 57 | .yarn-integrity 58 | 59 | # dotenv environment variables file 60 | .env 61 | 62 | # parcel-bundler cache (https://parceljs.org/) 63 | .cache 64 | 65 | # next.js build output 66 | .next 67 | 68 | # nuxt.js build output 69 | .nuxt 70 | 71 | # Nuxt generate 72 | dist 73 | 74 | # vuepress build output 75 | .vuepress/dist 76 | 77 | # Serverless directories 78 | .serverless 79 | 80 | # IDE / Editor 81 | .idea 82 | 83 | # Service worker 84 | sw.* 85 | 86 | # macOS 87 | .DS_Store 88 | 89 | # Vim swap files 90 | *.swp 91 | -------------------------------------------------------------------------------- /foodapp-problem1/assets/README.md: -------------------------------------------------------------------------------- 1 | # ASSETS 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains your un-compiled assets such as LESS, SASS, or JavaScript. 6 | 7 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/assets#webpacked). 8 | -------------------------------------------------------------------------------- /foodapp-problem1/assets/headerimg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sdras/building-web-apps-with-vue/569c837a70ae27014cb4d61c22c77c4efa2e0c39/foodapp-problem1/assets/headerimg.jpg -------------------------------------------------------------------------------- /foodapp-problem1/components/AppHeader.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 13 | 14 | 42 | -------------------------------------------------------------------------------- /foodapp-problem1/components/AppMenu.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /foodapp-problem1/components/AppRestaurantInfo.vue: -------------------------------------------------------------------------------- 1 | 31 | 32 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /foodapp-problem1/components/README.md: -------------------------------------------------------------------------------- 1 | # COMPONENTS 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | The components directory contains your Vue.js Components. 6 | 7 | _Nuxt.js doesn't supercharge these components._ 8 | -------------------------------------------------------------------------------- /foodapp-problem1/layouts/README.md: -------------------------------------------------------------------------------- 1 | # LAYOUTS 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains your Application Layouts. 6 | 7 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/views#layouts). 8 | -------------------------------------------------------------------------------- /foodapp-problem1/layouts/default.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 20 | 21 | 50 | -------------------------------------------------------------------------------- /foodapp-problem1/middleware/README.md: -------------------------------------------------------------------------------- 1 | # MIDDLEWARE 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains your application middleware. 6 | Middleware let you define custom functions that can be run before rendering either a page or a group of pages. 7 | 8 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/routing#middleware). 9 | -------------------------------------------------------------------------------- /foodapp-problem1/nuxt.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | /* 3 | ** Nuxt rendering mode 4 | ** See https://nuxtjs.org/api/configuration-mode 5 | */ 6 | mode: "universal", 7 | /* 8 | ** Nuxt target 9 | ** See https://nuxtjs.org/api/configuration-target 10 | */ 11 | target: "static", 12 | /* 13 | ** Headers of the page 14 | ** See https://nuxtjs.org/api/configuration-head 15 | */ 16 | head: { 17 | title: "Nuxt Food App", 18 | meta: [{ 19 | charset: "utf-8" 20 | }, 21 | { 22 | name: "viewport", 23 | content: "width=device-width, initial-scale=1" 24 | }, 25 | { 26 | hid: "description", 27 | name: "description", 28 | content: "Demo of Nuxt and Vue" 29 | } 30 | ], 31 | link: [{ 32 | rel: "icon", 33 | type: "image/x-icon", 34 | href: "/favicon.ico" 35 | }, 36 | { 37 | rel: "stylesheet", 38 | href: "https://fonts.googleapis.com/css2?family=Mulish:wght@300&family=Poppins:wght@600&display=swap" 39 | } 40 | ] 41 | }, 42 | /* 43 | ** Global CSS 44 | */ 45 | css: ["~/assets/main.scss"], 46 | /* 47 | ** Plugins to load before mounting the App 48 | ** https://nuxtjs.org/guide/plugins 49 | */ 50 | plugins: [], 51 | /* 52 | ** Auto import components 53 | ** See https://nuxtjs.org/api/configuration-components 54 | */ 55 | components: true, 56 | /* 57 | ** Nuxt.js dev-modules 58 | */ 59 | buildModules: [], 60 | /* 61 | ** Nuxt.js modules 62 | */ 63 | modules: [], 64 | /* 65 | ** Build configuration 66 | ** See https://nuxtjs.org/api/configuration-build/ 67 | */ 68 | build: {} 69 | }; 70 | -------------------------------------------------------------------------------- /foodapp-problem1/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "foodapp", 3 | "version": "1.0.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "nuxt", 7 | "build": "nuxt build", 8 | "start": "nuxt start", 9 | "generate": "nuxt generate" 10 | }, 11 | "dependencies": { 12 | "@vue/composition-api": "^1.0.0-beta.10", 13 | "node-sass": "^4.14.1", 14 | "nuxt": "^2.14.0", 15 | "sass-loader": "^9.0.3" 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /foodapp-problem1/pages/README.md: -------------------------------------------------------------------------------- 1 | # PAGES 2 | 3 | This directory contains your Application Views and Routes. 4 | The framework reads all the `*.vue` files inside this directory and creates the router of your application. 5 | 6 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/routing). 7 | -------------------------------------------------------------------------------- /foodapp-problem1/pages/index.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /foodapp-problem1/plugins/README.md: -------------------------------------------------------------------------------- 1 | # PLUGINS 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains Javascript plugins that you want to run before mounting the root Vue.js application. 6 | 7 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/plugins). 8 | -------------------------------------------------------------------------------- /foodapp-problem1/static/README.md: -------------------------------------------------------------------------------- 1 | # STATIC 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains your static files. 6 | Each file inside this directory is mapped to `/`. 7 | Thus you'd want to delete this README.md before deploying to production. 8 | 9 | Example: `/static/robots.txt` is mapped as `/robots.txt`. 10 | 11 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/assets#static). 12 | -------------------------------------------------------------------------------- /foodapp-problem1/static/dimsum-eggplant.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sdras/building-web-apps-with-vue/569c837a70ae27014cb4d61c22c77c4efa2e0c39/foodapp-problem1/static/dimsum-eggplant.jpg -------------------------------------------------------------------------------- /foodapp-problem1/static/dimsum-shrimp.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sdras/building-web-apps-with-vue/569c837a70ae27014cb4d61c22c77c4efa2e0c39/foodapp-problem1/static/dimsum-shrimp.jpg -------------------------------------------------------------------------------- /foodapp-problem1/static/dimsum-soup.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sdras/building-web-apps-with-vue/569c837a70ae27014cb4d61c22c77c4efa2e0c39/foodapp-problem1/static/dimsum-soup.jpg -------------------------------------------------------------------------------- /foodapp-problem1/static/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sdras/building-web-apps-with-vue/569c837a70ae27014cb4d61c22c77c4efa2e0c39/foodapp-problem1/static/favicon.ico -------------------------------------------------------------------------------- /foodapp-problem1/static/pizza-meat.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sdras/building-web-apps-with-vue/569c837a70ae27014cb4d61c22c77c4efa2e0c39/foodapp-problem1/static/pizza-meat.jpg -------------------------------------------------------------------------------- /foodapp-problem1/static/pizza-plain.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sdras/building-web-apps-with-vue/569c837a70ae27014cb4d61c22c77c4efa2e0c39/foodapp-problem1/static/pizza-plain.jpg -------------------------------------------------------------------------------- /foodapp-problem1/static/pizza-veggie.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sdras/building-web-apps-with-vue/569c837a70ae27014cb4d61c22c77c4efa2e0c39/foodapp-problem1/static/pizza-veggie.jpg -------------------------------------------------------------------------------- /foodapp-problem1/static/taco-burrito.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sdras/building-web-apps-with-vue/569c837a70ae27014cb4d61c22c77c4efa2e0c39/foodapp-problem1/static/taco-burrito.jpg -------------------------------------------------------------------------------- /foodapp-problem1/static/taco-quesadilla.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sdras/building-web-apps-with-vue/569c837a70ae27014cb4d61c22c77c4efa2e0c39/foodapp-problem1/static/taco-quesadilla.png -------------------------------------------------------------------------------- /foodapp-problem1/static/taco-taco.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sdras/building-web-apps-with-vue/569c837a70ae27014cb4d61c22c77c4efa2e0c39/foodapp-problem1/static/taco-taco.jpg -------------------------------------------------------------------------------- /foodapp-problem1/store/README.md: -------------------------------------------------------------------------------- 1 | # STORE 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains your Vuex Store files. 6 | Vuex Store option is implemented in the Nuxt.js framework. 7 | 8 | Creating a file in this directory automatically activates the option in the framework. 9 | 10 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/vuex-store). 11 | -------------------------------------------------------------------------------- /foodapp-problem2/.editorconfig: -------------------------------------------------------------------------------- 1 | # editorconfig.org 2 | root = true 3 | 4 | [*] 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | charset = utf-8 9 | trim_trailing_whitespace = true 10 | insert_final_newline = true 11 | 12 | [*.md] 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /foodapp-problem2/.gitignore: -------------------------------------------------------------------------------- 1 | # Created by .ignore support plugin (hsz.mobi) 2 | ### Node template 3 | # Logs 4 | /logs 5 | *.log 6 | npm-debug.log* 7 | yarn-debug.log* 8 | yarn-error.log* 9 | 10 | # Runtime data 11 | pids 12 | *.pid 13 | *.seed 14 | *.pid.lock 15 | 16 | # Directory for instrumented libs generated by jscoverage/JSCover 17 | lib-cov 18 | 19 | # Coverage directory used by tools like istanbul 20 | coverage 21 | 22 | # nyc test coverage 23 | .nyc_output 24 | 25 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 26 | .grunt 27 | 28 | # Bower dependency directory (https://bower.io/) 29 | bower_components 30 | 31 | # node-waf configuration 32 | .lock-wscript 33 | 34 | # Compiled binary addons (https://nodejs.org/api/addons.html) 35 | build/Release 36 | 37 | # Dependency directories 38 | node_modules/ 39 | jspm_packages/ 40 | 41 | # TypeScript v1 declaration files 42 | typings/ 43 | 44 | # Optional npm cache directory 45 | .npm 46 | 47 | # Optional eslint cache 48 | .eslintcache 49 | 50 | # Optional REPL history 51 | .node_repl_history 52 | 53 | # Output of 'npm pack' 54 | *.tgz 55 | 56 | # Yarn Integrity file 57 | .yarn-integrity 58 | 59 | # dotenv environment variables file 60 | .env 61 | 62 | # parcel-bundler cache (https://parceljs.org/) 63 | .cache 64 | 65 | # next.js build output 66 | .next 67 | 68 | # nuxt.js build output 69 | .nuxt 70 | 71 | # Nuxt generate 72 | dist 73 | 74 | # vuepress build output 75 | .vuepress/dist 76 | 77 | # Serverless directories 78 | .serverless 79 | 80 | # IDE / Editor 81 | .idea 82 | 83 | # Service worker 84 | sw.* 85 | 86 | # macOS 87 | .DS_Store 88 | 89 | # Vim swap files 90 | *.swp 91 | -------------------------------------------------------------------------------- /foodapp-problem2/assets/README.md: -------------------------------------------------------------------------------- 1 | # ASSETS 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains your un-compiled assets such as LESS, SASS, or JavaScript. 6 | 7 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/assets#webpacked). 8 | -------------------------------------------------------------------------------- /foodapp-problem2/assets/headerimg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sdras/building-web-apps-with-vue/569c837a70ae27014cb4d61c22c77c4efa2e0c39/foodapp-problem2/assets/headerimg.jpg -------------------------------------------------------------------------------- /foodapp-problem2/components/AppFooter.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | -------------------------------------------------------------------------------- /foodapp-problem2/components/AppHeader.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 17 | 18 | 46 | -------------------------------------------------------------------------------- /foodapp-problem2/components/AppMenu.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /foodapp-problem2/components/AppRestaurantInfo.vue: -------------------------------------------------------------------------------- 1 | 31 | 32 | 46 | 47 | 49 | -------------------------------------------------------------------------------- /foodapp-problem2/components/AppSelect.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /foodapp-problem2/components/README.md: -------------------------------------------------------------------------------- 1 | # COMPONENTS 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | The components directory contains your Vue.js Components. 6 | 7 | _Nuxt.js doesn't supercharge these components._ 8 | -------------------------------------------------------------------------------- /foodapp-problem2/layouts/README.md: -------------------------------------------------------------------------------- 1 | # LAYOUTS 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains your Application Layouts. 6 | 7 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/views#layouts). 8 | -------------------------------------------------------------------------------- /foodapp-problem2/layouts/default.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 22 | 23 | 52 | -------------------------------------------------------------------------------- /foodapp-problem2/middleware/README.md: -------------------------------------------------------------------------------- 1 | # MIDDLEWARE 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains your application middleware. 6 | Middleware let you define custom functions that can be run before rendering either a page or a group of pages. 7 | 8 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/routing#middleware). 9 | -------------------------------------------------------------------------------- /foodapp-problem2/nuxt.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | /* 3 | ** Nuxt rendering mode 4 | ** See https://nuxtjs.org/api/configuration-mode 5 | */ 6 | mode: "universal", 7 | /* 8 | ** Nuxt target 9 | ** See https://nuxtjs.org/api/configuration-target 10 | */ 11 | target: "static", 12 | /* 13 | ** Headers of the page 14 | ** See https://nuxtjs.org/api/configuration-head 15 | */ 16 | head: { 17 | title: "Nuxt Food App", 18 | meta: [{ 19 | charset: "utf-8" 20 | }, 21 | { 22 | name: "viewport", 23 | content: "width=device-width, initial-scale=1" 24 | }, 25 | { 26 | hid: "description", 27 | name: "description", 28 | content: "Demo of Nuxt and Vue" 29 | } 30 | ], 31 | link: [{ 32 | rel: "icon", 33 | type: "image/x-icon", 34 | href: "/favicon.ico" 35 | }, 36 | { 37 | rel: "stylesheet", 38 | href: "https://fonts.googleapis.com/css2?family=Mulish:wght@300&family=Poppins:wght@600&display=swap" 39 | } 40 | ] 41 | }, 42 | /* 43 | ** Global CSS 44 | */ 45 | css: ["~/assets/main.scss"], 46 | /* 47 | ** Plugins to load before mounting the App 48 | ** https://nuxtjs.org/guide/plugins 49 | */ 50 | plugins: ["~/plugins/getfood.server.js"], 51 | /* 52 | ** Auto import components 53 | ** See https://nuxtjs.org/api/configuration-components 54 | */ 55 | components: true, 56 | /* 57 | ** Nuxt.js dev-modules 58 | */ 59 | buildModules: [], 60 | /* 61 | ** Nuxt.js modules 62 | */ 63 | modules: [], 64 | /* 65 | ** Build configuration 66 | ** See https://nuxtjs.org/api/configuration-build/ 67 | */ 68 | build: {} 69 | }; 70 | -------------------------------------------------------------------------------- /foodapp-problem2/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "foodapp", 3 | "version": "1.0.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "nuxt", 7 | "build": "nuxt build", 8 | "start": "nuxt start", 9 | "generate": "nuxt generate" 10 | }, 11 | "dependencies": { 12 | "@vue/composition-api": "^1.0.0-beta.10", 13 | "node-sass": "^4.14.1", 14 | "nuxt": "^2.14.0", 15 | "sass-loader": "^9.0.3" 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /foodapp-problem2/pages/README.md: -------------------------------------------------------------------------------- 1 | # PAGES 2 | 3 | This directory contains your Application Views and Routes. 4 | The framework reads all the `*.vue` files inside this directory and creates the router of your application. 5 | 6 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/routing). 7 | -------------------------------------------------------------------------------- /foodapp-problem2/pages/index.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /foodapp-problem2/pages/item/_id.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 34 | 35 | 37 | -------------------------------------------------------------------------------- /foodapp-problem2/pages/restaurants.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 44 | 45 | 47 | -------------------------------------------------------------------------------- /foodapp-problem2/plugins/README.md: -------------------------------------------------------------------------------- 1 | # PLUGINS 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains Javascript plugins that you want to run before mounting the root Vue.js application. 6 | 7 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/plugins). 8 | -------------------------------------------------------------------------------- /foodapp-problem2/plugins/getfood.server.js: -------------------------------------------------------------------------------- 1 | export default async ({ 2 | store 3 | }) => { 4 | await store.dispatch('getFoodData') 5 | } 6 | -------------------------------------------------------------------------------- /foodapp-problem2/static/README.md: -------------------------------------------------------------------------------- 1 | # STATIC 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains your static files. 6 | Each file inside this directory is mapped to `/`. 7 | Thus you'd want to delete this README.md before deploying to production. 8 | 9 | Example: `/static/robots.txt` is mapped as `/robots.txt`. 10 | 11 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/assets#static). 12 | -------------------------------------------------------------------------------- /foodapp-problem2/static/dimsum-eggplant.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sdras/building-web-apps-with-vue/569c837a70ae27014cb4d61c22c77c4efa2e0c39/foodapp-problem2/static/dimsum-eggplant.jpg -------------------------------------------------------------------------------- /foodapp-problem2/static/dimsum-shrimp.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sdras/building-web-apps-with-vue/569c837a70ae27014cb4d61c22c77c4efa2e0c39/foodapp-problem2/static/dimsum-shrimp.jpg -------------------------------------------------------------------------------- /foodapp-problem2/static/dimsum-soup.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sdras/building-web-apps-with-vue/569c837a70ae27014cb4d61c22c77c4efa2e0c39/foodapp-problem2/static/dimsum-soup.jpg -------------------------------------------------------------------------------- /foodapp-problem2/static/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sdras/building-web-apps-with-vue/569c837a70ae27014cb4d61c22c77c4efa2e0c39/foodapp-problem2/static/favicon.ico -------------------------------------------------------------------------------- /foodapp-problem2/static/pizza-meat.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sdras/building-web-apps-with-vue/569c837a70ae27014cb4d61c22c77c4efa2e0c39/foodapp-problem2/static/pizza-meat.jpg -------------------------------------------------------------------------------- /foodapp-problem2/static/pizza-plain.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sdras/building-web-apps-with-vue/569c837a70ae27014cb4d61c22c77c4efa2e0c39/foodapp-problem2/static/pizza-plain.jpg -------------------------------------------------------------------------------- /foodapp-problem2/static/pizza-veggie.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sdras/building-web-apps-with-vue/569c837a70ae27014cb4d61c22c77c4efa2e0c39/foodapp-problem2/static/pizza-veggie.jpg -------------------------------------------------------------------------------- /foodapp-problem2/static/taco-burrito.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sdras/building-web-apps-with-vue/569c837a70ae27014cb4d61c22c77c4efa2e0c39/foodapp-problem2/static/taco-burrito.jpg -------------------------------------------------------------------------------- /foodapp-problem2/static/taco-quesadilla.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sdras/building-web-apps-with-vue/569c837a70ae27014cb4d61c22c77c4efa2e0c39/foodapp-problem2/static/taco-quesadilla.png -------------------------------------------------------------------------------- /foodapp-problem2/static/taco-taco.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sdras/building-web-apps-with-vue/569c837a70ae27014cb4d61c22c77c4efa2e0c39/foodapp-problem2/static/taco-taco.jpg -------------------------------------------------------------------------------- /foodapp-problem2/store/README.md: -------------------------------------------------------------------------------- 1 | # STORE 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains your Vuex Store files. 6 | Vuex Store option is implemented in the Nuxt.js framework. 7 | 8 | Creating a file in this directory automatically activates the option in the framework. 9 | 10 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/vuex-store). 11 | -------------------------------------------------------------------------------- /foodapp-problem2/store/index.js: -------------------------------------------------------------------------------- 1 | export const state = () => ({ 2 | fooddata: [] 3 | }); 4 | 5 | // export const getters = { 6 | // getterValue: state => { 7 | // return state.value 8 | // } 9 | // } 10 | 11 | export const mutations = { 12 | updateFoodData: (state, data) => { 13 | state.fooddata = data; 14 | } 15 | }; 16 | 17 | export const actions = { 18 | async getFoodData({ 19 | state, 20 | commit 21 | }) { 22 | if (state.fooddata.length) return; 23 | 24 | try { 25 | await fetch( 26 | "https://dva9vm8f1h.execute-api.us-east-2.amazonaws.com/production/restaurants", { 27 | headers: { 28 | "Content-Type": "application/json", 29 | "x-api-key": process.env.AWS_API_KEY 30 | } 31 | } 32 | ) 33 | .then(response => response.json()) 34 | .then(data => { 35 | commit("updateFoodData", data); 36 | }); 37 | } catch (err) { 38 | console.log(err); 39 | } 40 | } 41 | }; 42 | -------------------------------------------------------------------------------- /foodapp-problem3/.editorconfig: -------------------------------------------------------------------------------- 1 | # editorconfig.org 2 | root = true 3 | 4 | [*] 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | charset = utf-8 9 | trim_trailing_whitespace = true 10 | insert_final_newline = true 11 | 12 | [*.md] 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /foodapp-problem3/.gitignore: -------------------------------------------------------------------------------- 1 | # Created by .ignore support plugin (hsz.mobi) 2 | ### Node template 3 | # Logs 4 | /logs 5 | *.log 6 | npm-debug.log* 7 | yarn-debug.log* 8 | yarn-error.log* 9 | 10 | # Runtime data 11 | pids 12 | *.pid 13 | *.seed 14 | *.pid.lock 15 | 16 | # Directory for instrumented libs generated by jscoverage/JSCover 17 | lib-cov 18 | 19 | # Coverage directory used by tools like istanbul 20 | coverage 21 | 22 | # nyc test coverage 23 | .nyc_output 24 | 25 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 26 | .grunt 27 | 28 | # Bower dependency directory (https://bower.io/) 29 | bower_components 30 | 31 | # node-waf configuration 32 | .lock-wscript 33 | 34 | # Compiled binary addons (https://nodejs.org/api/addons.html) 35 | build/Release 36 | 37 | # Dependency directories 38 | node_modules/ 39 | jspm_packages/ 40 | 41 | # TypeScript v1 declaration files 42 | typings/ 43 | 44 | # Optional npm cache directory 45 | .npm 46 | 47 | # Optional eslint cache 48 | .eslintcache 49 | 50 | # Optional REPL history 51 | .node_repl_history 52 | 53 | # Output of 'npm pack' 54 | *.tgz 55 | 56 | # Yarn Integrity file 57 | .yarn-integrity 58 | 59 | # dotenv environment variables file 60 | .env 61 | 62 | # parcel-bundler cache (https://parceljs.org/) 63 | .cache 64 | 65 | # next.js build output 66 | .next 67 | 68 | # nuxt.js build output 69 | .nuxt 70 | 71 | # Nuxt generate 72 | dist 73 | 74 | # vuepress build output 75 | .vuepress/dist 76 | 77 | # Serverless directories 78 | .serverless 79 | 80 | # IDE / Editor 81 | .idea 82 | 83 | # Service worker 84 | sw.* 85 | 86 | # macOS 87 | .DS_Store 88 | 89 | # Vim swap files 90 | *.swp 91 | -------------------------------------------------------------------------------- /foodapp-problem3/assets/README.md: -------------------------------------------------------------------------------- 1 | # ASSETS 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains your un-compiled assets such as LESS, SASS, or JavaScript. 6 | 7 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/assets#webpacked). 8 | -------------------------------------------------------------------------------- /foodapp-problem3/assets/headerimg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sdras/building-web-apps-with-vue/569c837a70ae27014cb4d61c22c77c4efa2e0c39/foodapp-problem3/assets/headerimg.jpg -------------------------------------------------------------------------------- /foodapp-problem3/components/AppFooter.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | -------------------------------------------------------------------------------- /foodapp-problem3/components/AppHeader.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 17 | 18 | 46 | -------------------------------------------------------------------------------- /foodapp-problem3/components/AppLogo.vue: -------------------------------------------------------------------------------- 1 | 27 | 28 | 31 | 32 | 58 | -------------------------------------------------------------------------------- /foodapp-problem3/components/AppMenu.vue: -------------------------------------------------------------------------------- 1 | 16 | 17 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /foodapp-problem3/components/AppRestaurantInfo.vue: -------------------------------------------------------------------------------- 1 | 31 | 32 | 46 | 47 | 49 | -------------------------------------------------------------------------------- /foodapp-problem3/components/AppSelect.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /foodapp-problem3/components/AppToast.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 10 | 11 | 13 | -------------------------------------------------------------------------------- /foodapp-problem3/components/README.md: -------------------------------------------------------------------------------- 1 | # COMPONENTS 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | The components directory contains your Vue.js Components. 6 | 7 | _Nuxt.js doesn't supercharge these components._ 8 | -------------------------------------------------------------------------------- /foodapp-problem3/layouts/README.md: -------------------------------------------------------------------------------- 1 | # LAYOUTS 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains your Application Layouts. 6 | 7 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/views#layouts). 8 | -------------------------------------------------------------------------------- /foodapp-problem3/layouts/default.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 22 | 23 | 52 | -------------------------------------------------------------------------------- /foodapp-problem3/middleware/README.md: -------------------------------------------------------------------------------- 1 | # MIDDLEWARE 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains your application middleware. 6 | Middleware let you define custom functions that can be run before rendering either a page or a group of pages. 7 | 8 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/routing#middleware). 9 | -------------------------------------------------------------------------------- /foodapp-problem3/nuxt.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | /* 3 | ** Nuxt rendering mode 4 | ** See https://nuxtjs.org/api/configuration-mode 5 | */ 6 | mode: "universal", 7 | /* 8 | ** Nuxt target 9 | ** See https://nuxtjs.org/api/configuration-target 10 | */ 11 | target: "static", 12 | /* 13 | ** Headers of the page 14 | ** See https://nuxtjs.org/api/configuration-head 15 | */ 16 | head: { 17 | title: "Nuxt Food App", 18 | meta: [{ 19 | charset: "utf-8" 20 | }, 21 | { 22 | name: "viewport", 23 | content: "width=device-width, initial-scale=1" 24 | }, 25 | { 26 | hid: "description", 27 | name: "description", 28 | content: "Demo of Nuxt and Vue" 29 | } 30 | ], 31 | link: [{ 32 | rel: "icon", 33 | type: "image/x-icon", 34 | href: "/favicon.ico" 35 | }, 36 | { 37 | rel: "stylesheet", 38 | href: "https://fonts.googleapis.com/css2?family=Mulish:wght@300&family=Poppins:wght@600&display=swap" 39 | } 40 | ] 41 | }, 42 | /* 43 | ** Global CSS 44 | */ 45 | css: ["~/assets/main.scss"], 46 | /* 47 | ** Plugins to load before mounting the App 48 | ** https://nuxtjs.org/guide/plugins 49 | */ 50 | plugins: ["~/plugins/getfood.server.js"], 51 | /* 52 | ** Auto import components 53 | ** See https://nuxtjs.org/api/configuration-components 54 | */ 55 | components: true, 56 | /* 57 | ** Nuxt.js dev-modules 58 | */ 59 | buildModules: [], 60 | /* 61 | ** Nuxt.js modules 62 | */ 63 | modules: [], 64 | /* 65 | ** Build configuration 66 | ** See https://nuxtjs.org/api/configuration-build/ 67 | */ 68 | build: {} 69 | }; 70 | -------------------------------------------------------------------------------- /foodapp-problem3/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "foodapp", 3 | "version": "1.0.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "nuxt", 7 | "build": "nuxt build", 8 | "start": "nuxt start", 9 | "generate": "nuxt generate" 10 | }, 11 | "dependencies": { 12 | "@vue/composition-api": "^1.0.0-beta.10", 13 | "node-sass": "^4.14.1", 14 | "nuxt": "^2.14.0", 15 | "sass-loader": "^9.0.3", 16 | "uuid": "^8.3.0" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /foodapp-problem3/pages/README.md: -------------------------------------------------------------------------------- 1 | # PAGES 2 | 3 | This directory contains your Application Views and Routes. 4 | The framework reads all the `*.vue` files inside this directory and creates the router of your application. 5 | 6 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/routing). 7 | -------------------------------------------------------------------------------- /foodapp-problem3/pages/cart.vue: -------------------------------------------------------------------------------- 1 | 36 | 37 | 46 | 47 | 49 | -------------------------------------------------------------------------------- /foodapp-problem3/pages/index.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /foodapp-problem3/pages/restaurants.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 44 | 45 | 47 | -------------------------------------------------------------------------------- /foodapp-problem3/plugins/README.md: -------------------------------------------------------------------------------- 1 | # PLUGINS 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains Javascript plugins that you want to run before mounting the root Vue.js application. 6 | 7 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/plugins). 8 | -------------------------------------------------------------------------------- /foodapp-problem3/plugins/getfood.server.js: -------------------------------------------------------------------------------- 1 | export default async ({ 2 | store 3 | }) => { 4 | await store.dispatch('getFoodData') 5 | } 6 | -------------------------------------------------------------------------------- /foodapp-problem3/static/README.md: -------------------------------------------------------------------------------- 1 | # STATIC 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains your static files. 6 | Each file inside this directory is mapped to `/`. 7 | Thus you'd want to delete this README.md before deploying to production. 8 | 9 | Example: `/static/robots.txt` is mapped as `/robots.txt`. 10 | 11 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/assets#static). 12 | -------------------------------------------------------------------------------- /foodapp-problem3/static/dimsum-eggplant.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sdras/building-web-apps-with-vue/569c837a70ae27014cb4d61c22c77c4efa2e0c39/foodapp-problem3/static/dimsum-eggplant.jpg -------------------------------------------------------------------------------- /foodapp-problem3/static/dimsum-shrimp.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sdras/building-web-apps-with-vue/569c837a70ae27014cb4d61c22c77c4efa2e0c39/foodapp-problem3/static/dimsum-shrimp.jpg -------------------------------------------------------------------------------- /foodapp-problem3/static/dimsum-soup.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sdras/building-web-apps-with-vue/569c837a70ae27014cb4d61c22c77c4efa2e0c39/foodapp-problem3/static/dimsum-soup.jpg -------------------------------------------------------------------------------- /foodapp-problem3/static/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sdras/building-web-apps-with-vue/569c837a70ae27014cb4d61c22c77c4efa2e0c39/foodapp-problem3/static/favicon.ico -------------------------------------------------------------------------------- /foodapp-problem3/static/pizza-meat.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sdras/building-web-apps-with-vue/569c837a70ae27014cb4d61c22c77c4efa2e0c39/foodapp-problem3/static/pizza-meat.jpg -------------------------------------------------------------------------------- /foodapp-problem3/static/pizza-plain.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sdras/building-web-apps-with-vue/569c837a70ae27014cb4d61c22c77c4efa2e0c39/foodapp-problem3/static/pizza-plain.jpg -------------------------------------------------------------------------------- /foodapp-problem3/static/pizza-veggie.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sdras/building-web-apps-with-vue/569c837a70ae27014cb4d61c22c77c4efa2e0c39/foodapp-problem3/static/pizza-veggie.jpg -------------------------------------------------------------------------------- /foodapp-problem3/static/taco-burrito.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sdras/building-web-apps-with-vue/569c837a70ae27014cb4d61c22c77c4efa2e0c39/foodapp-problem3/static/taco-burrito.jpg -------------------------------------------------------------------------------- /foodapp-problem3/static/taco-quesadilla.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sdras/building-web-apps-with-vue/569c837a70ae27014cb4d61c22c77c4efa2e0c39/foodapp-problem3/static/taco-quesadilla.png -------------------------------------------------------------------------------- /foodapp-problem3/static/taco-taco.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sdras/building-web-apps-with-vue/569c837a70ae27014cb4d61c22c77c4efa2e0c39/foodapp-problem3/static/taco-taco.jpg -------------------------------------------------------------------------------- /foodapp-problem3/store/README.md: -------------------------------------------------------------------------------- 1 | # STORE 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains your Vuex Store files. 6 | Vuex Store option is implemented in the Nuxt.js framework. 7 | 8 | Creating a file in this directory automatically activates the option in the framework. 9 | 10 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/vuex-store). 11 | -------------------------------------------------------------------------------- /foodapp-problem3/store/index.js: -------------------------------------------------------------------------------- 1 | import { 2 | v4 as uuidv4 3 | } from "uuid"; 4 | 5 | export const state = () => ({ 6 | cart: [], 7 | fooddata: [] 8 | }); 9 | 10 | export const getters = { 11 | totalPrice: state => { 12 | if (!state.cart.length) return 0; 13 | return state.cart.reduce((ac, next) => ac + +next.combinedPrice, 0); 14 | } 15 | }; 16 | 17 | export const mutations = { 18 | addToCart: (state, formOutput) => { 19 | formOutput.id = uuidv4(); 20 | state.cart.push(formOutput); 21 | }, 22 | updateFoodData: (state, data) => { 23 | state.fooddata = data; 24 | } 25 | }; 26 | 27 | export const actions = { 28 | async getFoodData({ 29 | state, 30 | commit 31 | }) { 32 | if (state.fooddata.length) return; 33 | 34 | try { 35 | await fetch( 36 | "https://dva9vm8f1h.execute-api.us-east-2.amazonaws.com/production/restaurants", { 37 | headers: { 38 | "Content-Type": "application/json", 39 | "x-api-key": process.env.AWS_API_KEY 40 | } 41 | } 42 | ) 43 | .then(response => response.json()) 44 | .then(data => { 45 | commit("updateFoodData", data); 46 | }); 47 | } catch (err) { 48 | console.log(err); 49 | } 50 | } 51 | }; 52 | -------------------------------------------------------------------------------- /foodapp-resources/env: -------------------------------------------------------------------------------- 1 | AWS_API_KEY=Ni9tok2QGz9xOSKsfBp6q87dnjS8zVmo5t45SGsp -------------------------------------------------------------------------------- /foodapp-resources/foodlogo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /foodapp-resources/headerimg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sdras/building-web-apps-with-vue/569c837a70ae27014cb4d61c22c77c4efa2e0c39/foodapp-resources/headerimg.jpg -------------------------------------------------------------------------------- /foodapp-resources/noun_hungry_1092665.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /foodapp-resources/photoimgs/dimsum-eggplant.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sdras/building-web-apps-with-vue/569c837a70ae27014cb4d61c22c77c4efa2e0c39/foodapp-resources/photoimgs/dimsum-eggplant.jpg -------------------------------------------------------------------------------- /foodapp-resources/photoimgs/dimsum-shrimp.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sdras/building-web-apps-with-vue/569c837a70ae27014cb4d61c22c77c4efa2e0c39/foodapp-resources/photoimgs/dimsum-shrimp.jpg -------------------------------------------------------------------------------- /foodapp-resources/photoimgs/dimsum-soup.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sdras/building-web-apps-with-vue/569c837a70ae27014cb4d61c22c77c4efa2e0c39/foodapp-resources/photoimgs/dimsum-soup.jpg -------------------------------------------------------------------------------- /foodapp-resources/photoimgs/pizza-meat.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sdras/building-web-apps-with-vue/569c837a70ae27014cb4d61c22c77c4efa2e0c39/foodapp-resources/photoimgs/pizza-meat.jpg -------------------------------------------------------------------------------- /foodapp-resources/photoimgs/pizza-plain.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sdras/building-web-apps-with-vue/569c837a70ae27014cb4d61c22c77c4efa2e0c39/foodapp-resources/photoimgs/pizza-plain.jpg -------------------------------------------------------------------------------- /foodapp-resources/photoimgs/pizza-veggie.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sdras/building-web-apps-with-vue/569c837a70ae27014cb4d61c22c77c4efa2e0c39/foodapp-resources/photoimgs/pizza-veggie.jpg -------------------------------------------------------------------------------- /foodapp-resources/photoimgs/taco-burrito.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sdras/building-web-apps-with-vue/569c837a70ae27014cb4d61c22c77c4efa2e0c39/foodapp-resources/photoimgs/taco-burrito.jpg -------------------------------------------------------------------------------- /foodapp-resources/photoimgs/taco-quesadilla.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sdras/building-web-apps-with-vue/569c837a70ae27014cb4d61c22c77c4efa2e0c39/foodapp-resources/photoimgs/taco-quesadilla.png -------------------------------------------------------------------------------- /foodapp-resources/photoimgs/taco-taco.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sdras/building-web-apps-with-vue/569c837a70ae27014cb4d61c22c77c4efa2e0c39/foodapp-resources/photoimgs/taco-taco.jpg -------------------------------------------------------------------------------- /foodapp-solution1/.editorconfig: -------------------------------------------------------------------------------- 1 | # editorconfig.org 2 | root = true 3 | 4 | [*] 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | charset = utf-8 9 | trim_trailing_whitespace = true 10 | insert_final_newline = true 11 | 12 | [*.md] 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /foodapp-solution1/.gitignore: -------------------------------------------------------------------------------- 1 | # Created by .ignore support plugin (hsz.mobi) 2 | ### Node template 3 | # Logs 4 | /logs 5 | *.log 6 | npm-debug.log* 7 | yarn-debug.log* 8 | yarn-error.log* 9 | 10 | # Runtime data 11 | pids 12 | *.pid 13 | *.seed 14 | *.pid.lock 15 | 16 | # Directory for instrumented libs generated by jscoverage/JSCover 17 | lib-cov 18 | 19 | # Coverage directory used by tools like istanbul 20 | coverage 21 | 22 | # nyc test coverage 23 | .nyc_output 24 | 25 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 26 | .grunt 27 | 28 | # Bower dependency directory (https://bower.io/) 29 | bower_components 30 | 31 | # node-waf configuration 32 | .lock-wscript 33 | 34 | # Compiled binary addons (https://nodejs.org/api/addons.html) 35 | build/Release 36 | 37 | # Dependency directories 38 | node_modules/ 39 | jspm_packages/ 40 | 41 | # TypeScript v1 declaration files 42 | typings/ 43 | 44 | # Optional npm cache directory 45 | .npm 46 | 47 | # Optional eslint cache 48 | .eslintcache 49 | 50 | # Optional REPL history 51 | .node_repl_history 52 | 53 | # Output of 'npm pack' 54 | *.tgz 55 | 56 | # Yarn Integrity file 57 | .yarn-integrity 58 | 59 | # dotenv environment variables file 60 | .env 61 | 62 | # parcel-bundler cache (https://parceljs.org/) 63 | .cache 64 | 65 | # next.js build output 66 | .next 67 | 68 | # nuxt.js build output 69 | .nuxt 70 | 71 | # Nuxt generate 72 | dist 73 | 74 | # vuepress build output 75 | .vuepress/dist 76 | 77 | # Serverless directories 78 | .serverless 79 | 80 | # IDE / Editor 81 | .idea 82 | 83 | # Service worker 84 | sw.* 85 | 86 | # macOS 87 | .DS_Store 88 | 89 | # Vim swap files 90 | *.swp 91 | -------------------------------------------------------------------------------- /foodapp-solution1/assets/README.md: -------------------------------------------------------------------------------- 1 | # ASSETS 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains your un-compiled assets such as LESS, SASS, or JavaScript. 6 | 7 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/assets#webpacked). 8 | -------------------------------------------------------------------------------- /foodapp-solution1/assets/headerimg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sdras/building-web-apps-with-vue/569c837a70ae27014cb4d61c22c77c4efa2e0c39/foodapp-solution1/assets/headerimg.jpg -------------------------------------------------------------------------------- /foodapp-solution1/components/AppFooter.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | -------------------------------------------------------------------------------- /foodapp-solution1/components/AppHeader.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 17 | 18 | 46 | -------------------------------------------------------------------------------- /foodapp-solution1/components/AppMenu.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /foodapp-solution1/components/AppRestaurantInfo.vue: -------------------------------------------------------------------------------- 1 | 31 | 32 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /foodapp-solution1/components/README.md: -------------------------------------------------------------------------------- 1 | # COMPONENTS 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | The components directory contains your Vue.js Components. 6 | 7 | _Nuxt.js doesn't supercharge these components._ 8 | -------------------------------------------------------------------------------- /foodapp-solution1/layouts/README.md: -------------------------------------------------------------------------------- 1 | # LAYOUTS 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains your Application Layouts. 6 | 7 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/views#layouts). 8 | -------------------------------------------------------------------------------- /foodapp-solution1/layouts/default.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 22 | 23 | 52 | -------------------------------------------------------------------------------- /foodapp-solution1/middleware/README.md: -------------------------------------------------------------------------------- 1 | # MIDDLEWARE 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains your application middleware. 6 | Middleware let you define custom functions that can be run before rendering either a page or a group of pages. 7 | 8 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/routing#middleware). 9 | -------------------------------------------------------------------------------- /foodapp-solution1/nuxt.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | /* 3 | ** Nuxt rendering mode 4 | ** See https://nuxtjs.org/api/configuration-mode 5 | */ 6 | mode: "universal", 7 | /* 8 | ** Nuxt target 9 | ** See https://nuxtjs.org/api/configuration-target 10 | */ 11 | target: "static", 12 | /* 13 | ** Headers of the page 14 | ** See https://nuxtjs.org/api/configuration-head 15 | */ 16 | head: { 17 | title: "Nuxt Food App", 18 | meta: [{ 19 | charset: "utf-8" 20 | }, 21 | { 22 | name: "viewport", 23 | content: "width=device-width, initial-scale=1" 24 | }, 25 | { 26 | hid: "description", 27 | name: "description", 28 | content: "Demo of Nuxt and Vue" 29 | } 30 | ], 31 | link: [{ 32 | rel: "icon", 33 | type: "image/x-icon", 34 | href: "/favicon.ico" 35 | }, 36 | { 37 | rel: "stylesheet", 38 | href: "https://fonts.googleapis.com/css2?family=Mulish:wght@300&family=Poppins:wght@600&display=swap" 39 | } 40 | ] 41 | }, 42 | /* 43 | ** Global CSS 44 | */ 45 | css: ["~/assets/main.scss"], 46 | /* 47 | ** Plugins to load before mounting the App 48 | ** https://nuxtjs.org/guide/plugins 49 | */ 50 | plugins: [], 51 | /* 52 | ** Auto import components 53 | ** See https://nuxtjs.org/api/configuration-components 54 | */ 55 | components: true, 56 | /* 57 | ** Nuxt.js dev-modules 58 | */ 59 | buildModules: [], 60 | /* 61 | ** Nuxt.js modules 62 | */ 63 | modules: [], 64 | /* 65 | ** Build configuration 66 | ** See https://nuxtjs.org/api/configuration-build/ 67 | */ 68 | build: {} 69 | }; 70 | -------------------------------------------------------------------------------- /foodapp-solution1/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "foodapp", 3 | "version": "1.0.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "nuxt", 7 | "build": "nuxt build", 8 | "start": "nuxt start", 9 | "generate": "nuxt generate" 10 | }, 11 | "dependencies": { 12 | "@vue/composition-api": "^1.0.0-beta.10", 13 | "node-sass": "^4.14.1", 14 | "nuxt": "^2.14.0", 15 | "sass-loader": "^9.0.3" 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /foodapp-solution1/pages/README.md: -------------------------------------------------------------------------------- 1 | # PAGES 2 | 3 | This directory contains your Application Views and Routes. 4 | The framework reads all the `*.vue` files inside this directory and creates the router of your application. 5 | 6 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/routing). 7 | -------------------------------------------------------------------------------- /foodapp-solution1/pages/index.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /foodapp-solution1/pages/restaurants.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /foodapp-solution1/plugins/README.md: -------------------------------------------------------------------------------- 1 | # PLUGINS 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains Javascript plugins that you want to run before mounting the root Vue.js application. 6 | 7 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/plugins). 8 | -------------------------------------------------------------------------------- /foodapp-solution1/static/README.md: -------------------------------------------------------------------------------- 1 | # STATIC 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains your static files. 6 | Each file inside this directory is mapped to `/`. 7 | Thus you'd want to delete this README.md before deploying to production. 8 | 9 | Example: `/static/robots.txt` is mapped as `/robots.txt`. 10 | 11 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/assets#static). 12 | -------------------------------------------------------------------------------- /foodapp-solution1/static/dimsum-eggplant.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sdras/building-web-apps-with-vue/569c837a70ae27014cb4d61c22c77c4efa2e0c39/foodapp-solution1/static/dimsum-eggplant.jpg -------------------------------------------------------------------------------- /foodapp-solution1/static/dimsum-shrimp.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sdras/building-web-apps-with-vue/569c837a70ae27014cb4d61c22c77c4efa2e0c39/foodapp-solution1/static/dimsum-shrimp.jpg -------------------------------------------------------------------------------- /foodapp-solution1/static/dimsum-soup.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sdras/building-web-apps-with-vue/569c837a70ae27014cb4d61c22c77c4efa2e0c39/foodapp-solution1/static/dimsum-soup.jpg -------------------------------------------------------------------------------- /foodapp-solution1/static/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sdras/building-web-apps-with-vue/569c837a70ae27014cb4d61c22c77c4efa2e0c39/foodapp-solution1/static/favicon.ico -------------------------------------------------------------------------------- /foodapp-solution1/static/pizza-meat.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sdras/building-web-apps-with-vue/569c837a70ae27014cb4d61c22c77c4efa2e0c39/foodapp-solution1/static/pizza-meat.jpg -------------------------------------------------------------------------------- /foodapp-solution1/static/pizza-plain.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sdras/building-web-apps-with-vue/569c837a70ae27014cb4d61c22c77c4efa2e0c39/foodapp-solution1/static/pizza-plain.jpg -------------------------------------------------------------------------------- /foodapp-solution1/static/pizza-veggie.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sdras/building-web-apps-with-vue/569c837a70ae27014cb4d61c22c77c4efa2e0c39/foodapp-solution1/static/pizza-veggie.jpg -------------------------------------------------------------------------------- /foodapp-solution1/static/taco-burrito.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sdras/building-web-apps-with-vue/569c837a70ae27014cb4d61c22c77c4efa2e0c39/foodapp-solution1/static/taco-burrito.jpg -------------------------------------------------------------------------------- /foodapp-solution1/static/taco-quesadilla.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sdras/building-web-apps-with-vue/569c837a70ae27014cb4d61c22c77c4efa2e0c39/foodapp-solution1/static/taco-quesadilla.png -------------------------------------------------------------------------------- /foodapp-solution1/static/taco-taco.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sdras/building-web-apps-with-vue/569c837a70ae27014cb4d61c22c77c4efa2e0c39/foodapp-solution1/static/taco-taco.jpg -------------------------------------------------------------------------------- /foodapp-solution1/store/README.md: -------------------------------------------------------------------------------- 1 | # STORE 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains your Vuex Store files. 6 | Vuex Store option is implemented in the Nuxt.js framework. 7 | 8 | Creating a file in this directory automatically activates the option in the framework. 9 | 10 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/vuex-store). 11 | -------------------------------------------------------------------------------- /foodapp-solution2/.editorconfig: -------------------------------------------------------------------------------- 1 | # editorconfig.org 2 | root = true 3 | 4 | [*] 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | charset = utf-8 9 | trim_trailing_whitespace = true 10 | insert_final_newline = true 11 | 12 | [*.md] 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /foodapp-solution2/.gitignore: -------------------------------------------------------------------------------- 1 | # Created by .ignore support plugin (hsz.mobi) 2 | ### Node template 3 | # Logs 4 | /logs 5 | *.log 6 | npm-debug.log* 7 | yarn-debug.log* 8 | yarn-error.log* 9 | 10 | # Runtime data 11 | pids 12 | *.pid 13 | *.seed 14 | *.pid.lock 15 | 16 | # Directory for instrumented libs generated by jscoverage/JSCover 17 | lib-cov 18 | 19 | # Coverage directory used by tools like istanbul 20 | coverage 21 | 22 | # nyc test coverage 23 | .nyc_output 24 | 25 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 26 | .grunt 27 | 28 | # Bower dependency directory (https://bower.io/) 29 | bower_components 30 | 31 | # node-waf configuration 32 | .lock-wscript 33 | 34 | # Compiled binary addons (https://nodejs.org/api/addons.html) 35 | build/Release 36 | 37 | # Dependency directories 38 | node_modules/ 39 | jspm_packages/ 40 | 41 | # TypeScript v1 declaration files 42 | typings/ 43 | 44 | # Optional npm cache directory 45 | .npm 46 | 47 | # Optional eslint cache 48 | .eslintcache 49 | 50 | # Optional REPL history 51 | .node_repl_history 52 | 53 | # Output of 'npm pack' 54 | *.tgz 55 | 56 | # Yarn Integrity file 57 | .yarn-integrity 58 | 59 | # dotenv environment variables file 60 | .env 61 | 62 | # parcel-bundler cache (https://parceljs.org/) 63 | .cache 64 | 65 | # next.js build output 66 | .next 67 | 68 | # nuxt.js build output 69 | .nuxt 70 | 71 | # Nuxt generate 72 | dist 73 | 74 | # vuepress build output 75 | .vuepress/dist 76 | 77 | # Serverless directories 78 | .serverless 79 | 80 | # IDE / Editor 81 | .idea 82 | 83 | # Service worker 84 | sw.* 85 | 86 | # macOS 87 | .DS_Store 88 | 89 | # Vim swap files 90 | *.swp 91 | -------------------------------------------------------------------------------- /foodapp-solution2/assets/README.md: -------------------------------------------------------------------------------- 1 | # ASSETS 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains your un-compiled assets such as LESS, SASS, or JavaScript. 6 | 7 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/assets#webpacked). 8 | -------------------------------------------------------------------------------- /foodapp-solution2/assets/headerimg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sdras/building-web-apps-with-vue/569c837a70ae27014cb4d61c22c77c4efa2e0c39/foodapp-solution2/assets/headerimg.jpg -------------------------------------------------------------------------------- /foodapp-solution2/components/AppFooter.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | -------------------------------------------------------------------------------- /foodapp-solution2/components/AppHeader.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 17 | 18 | 46 | -------------------------------------------------------------------------------- /foodapp-solution2/components/AppMenu.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /foodapp-solution2/components/AppRestaurantInfo.vue: -------------------------------------------------------------------------------- 1 | 31 | 32 | 46 | 47 | 49 | -------------------------------------------------------------------------------- /foodapp-solution2/components/AppSelect.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /foodapp-solution2/components/README.md: -------------------------------------------------------------------------------- 1 | # COMPONENTS 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | The components directory contains your Vue.js Components. 6 | 7 | _Nuxt.js doesn't supercharge these components._ 8 | -------------------------------------------------------------------------------- /foodapp-solution2/layouts/README.md: -------------------------------------------------------------------------------- 1 | # LAYOUTS 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains your Application Layouts. 6 | 7 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/views#layouts). 8 | -------------------------------------------------------------------------------- /foodapp-solution2/layouts/default.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 22 | 23 | 52 | -------------------------------------------------------------------------------- /foodapp-solution2/middleware/README.md: -------------------------------------------------------------------------------- 1 | # MIDDLEWARE 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains your application middleware. 6 | Middleware let you define custom functions that can be run before rendering either a page or a group of pages. 7 | 8 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/routing#middleware). 9 | -------------------------------------------------------------------------------- /foodapp-solution2/nuxt.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | /* 3 | ** Nuxt rendering mode 4 | ** See https://nuxtjs.org/api/configuration-mode 5 | */ 6 | mode: "universal", 7 | /* 8 | ** Nuxt target 9 | ** See https://nuxtjs.org/api/configuration-target 10 | */ 11 | target: "static", 12 | /* 13 | ** Headers of the page 14 | ** See https://nuxtjs.org/api/configuration-head 15 | */ 16 | head: { 17 | title: "Nuxt Food App", 18 | meta: [{ 19 | charset: "utf-8" 20 | }, 21 | { 22 | name: "viewport", 23 | content: "width=device-width, initial-scale=1" 24 | }, 25 | { 26 | hid: "description", 27 | name: "description", 28 | content: "Demo of Nuxt and Vue" 29 | } 30 | ], 31 | link: [{ 32 | rel: "icon", 33 | type: "image/x-icon", 34 | href: "/favicon.ico" 35 | }, 36 | { 37 | rel: "stylesheet", 38 | href: "https://fonts.googleapis.com/css2?family=Mulish:wght@300&family=Poppins:wght@600&display=swap" 39 | } 40 | ] 41 | }, 42 | /* 43 | ** Global CSS 44 | */ 45 | css: ["~/assets/main.scss"], 46 | /* 47 | ** Plugins to load before mounting the App 48 | ** https://nuxtjs.org/guide/plugins 49 | */ 50 | plugins: ["~/plugins/getfood.server.js"], 51 | /* 52 | ** Auto import components 53 | ** See https://nuxtjs.org/api/configuration-components 54 | */ 55 | components: true, 56 | /* 57 | ** Nuxt.js dev-modules 58 | */ 59 | buildModules: [], 60 | /* 61 | ** Nuxt.js modules 62 | */ 63 | modules: [], 64 | /* 65 | ** Build configuration 66 | ** See https://nuxtjs.org/api/configuration-build/ 67 | */ 68 | build: {} 69 | }; 70 | -------------------------------------------------------------------------------- /foodapp-solution2/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "foodapp", 3 | "version": "1.0.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "nuxt", 7 | "build": "nuxt build", 8 | "start": "nuxt start", 9 | "generate": "nuxt generate" 10 | }, 11 | "dependencies": { 12 | "@vue/composition-api": "^1.0.0-beta.10", 13 | "node-sass": "^4.14.1", 14 | "nuxt": "^2.14.0", 15 | "sass-loader": "^9.0.3" 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /foodapp-solution2/pages/README.md: -------------------------------------------------------------------------------- 1 | # PAGES 2 | 3 | This directory contains your Application Views and Routes. 4 | The framework reads all the `*.vue` files inside this directory and creates the router of your application. 5 | 6 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/routing). 7 | -------------------------------------------------------------------------------- /foodapp-solution2/pages/index.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /foodapp-solution2/pages/restaurants.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 44 | 45 | 47 | -------------------------------------------------------------------------------- /foodapp-solution2/plugins/README.md: -------------------------------------------------------------------------------- 1 | # PLUGINS 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains Javascript plugins that you want to run before mounting the root Vue.js application. 6 | 7 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/plugins). 8 | -------------------------------------------------------------------------------- /foodapp-solution2/plugins/getfood.server.js: -------------------------------------------------------------------------------- 1 | export default async ({ 2 | store 3 | }) => { 4 | await store.dispatch('getFoodData') 5 | } 6 | -------------------------------------------------------------------------------- /foodapp-solution2/static/README.md: -------------------------------------------------------------------------------- 1 | # STATIC 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains your static files. 6 | Each file inside this directory is mapped to `/`. 7 | Thus you'd want to delete this README.md before deploying to production. 8 | 9 | Example: `/static/robots.txt` is mapped as `/robots.txt`. 10 | 11 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/assets#static). 12 | -------------------------------------------------------------------------------- /foodapp-solution2/static/dimsum-eggplant.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sdras/building-web-apps-with-vue/569c837a70ae27014cb4d61c22c77c4efa2e0c39/foodapp-solution2/static/dimsum-eggplant.jpg -------------------------------------------------------------------------------- /foodapp-solution2/static/dimsum-shrimp.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sdras/building-web-apps-with-vue/569c837a70ae27014cb4d61c22c77c4efa2e0c39/foodapp-solution2/static/dimsum-shrimp.jpg -------------------------------------------------------------------------------- /foodapp-solution2/static/dimsum-soup.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sdras/building-web-apps-with-vue/569c837a70ae27014cb4d61c22c77c4efa2e0c39/foodapp-solution2/static/dimsum-soup.jpg -------------------------------------------------------------------------------- /foodapp-solution2/static/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sdras/building-web-apps-with-vue/569c837a70ae27014cb4d61c22c77c4efa2e0c39/foodapp-solution2/static/favicon.ico -------------------------------------------------------------------------------- /foodapp-solution2/static/pizza-meat.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sdras/building-web-apps-with-vue/569c837a70ae27014cb4d61c22c77c4efa2e0c39/foodapp-solution2/static/pizza-meat.jpg -------------------------------------------------------------------------------- /foodapp-solution2/static/pizza-plain.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sdras/building-web-apps-with-vue/569c837a70ae27014cb4d61c22c77c4efa2e0c39/foodapp-solution2/static/pizza-plain.jpg -------------------------------------------------------------------------------- /foodapp-solution2/static/pizza-veggie.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sdras/building-web-apps-with-vue/569c837a70ae27014cb4d61c22c77c4efa2e0c39/foodapp-solution2/static/pizza-veggie.jpg -------------------------------------------------------------------------------- /foodapp-solution2/static/taco-burrito.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sdras/building-web-apps-with-vue/569c837a70ae27014cb4d61c22c77c4efa2e0c39/foodapp-solution2/static/taco-burrito.jpg -------------------------------------------------------------------------------- /foodapp-solution2/static/taco-quesadilla.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sdras/building-web-apps-with-vue/569c837a70ae27014cb4d61c22c77c4efa2e0c39/foodapp-solution2/static/taco-quesadilla.png -------------------------------------------------------------------------------- /foodapp-solution2/static/taco-taco.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sdras/building-web-apps-with-vue/569c837a70ae27014cb4d61c22c77c4efa2e0c39/foodapp-solution2/static/taco-taco.jpg -------------------------------------------------------------------------------- /foodapp-solution2/store/README.md: -------------------------------------------------------------------------------- 1 | # STORE 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains your Vuex Store files. 6 | Vuex Store option is implemented in the Nuxt.js framework. 7 | 8 | Creating a file in this directory automatically activates the option in the framework. 9 | 10 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/vuex-store). 11 | -------------------------------------------------------------------------------- /foodapp-solution2/store/index.js: -------------------------------------------------------------------------------- 1 | export const state = () => ({ 2 | fooddata: [] 3 | }); 4 | 5 | // export const getters = { 6 | // getterValue: state => { 7 | // return state.value 8 | // } 9 | // } 10 | 11 | export const mutations = { 12 | updateFoodData: (state, data) => { 13 | state.fooddata = data; 14 | } 15 | }; 16 | 17 | export const actions = { 18 | async getFoodData({ 19 | state, 20 | commit 21 | }) { 22 | if (state.fooddata.length) return; 23 | 24 | try { 25 | await fetch( 26 | "https://dva9vm8f1h.execute-api.us-east-2.amazonaws.com/production/restaurants", { 27 | headers: { 28 | "Content-Type": "application/json", 29 | "x-api-key": process.env.AWS_API_KEY 30 | } 31 | } 32 | ) 33 | .then(response => response.json()) 34 | .then(data => { 35 | commit("updateFoodData", data); 36 | }); 37 | } catch (err) { 38 | console.log(err); 39 | } 40 | } 41 | }; 42 | -------------------------------------------------------------------------------- /foodapp-solution3/.editorconfig: -------------------------------------------------------------------------------- 1 | # editorconfig.org 2 | root = true 3 | 4 | [*] 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | charset = utf-8 9 | trim_trailing_whitespace = true 10 | insert_final_newline = true 11 | 12 | [*.md] 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /foodapp-solution3/.gitignore: -------------------------------------------------------------------------------- 1 | # Created by .ignore support plugin (hsz.mobi) 2 | ### Node template 3 | # Logs 4 | /logs 5 | *.log 6 | npm-debug.log* 7 | yarn-debug.log* 8 | yarn-error.log* 9 | 10 | # Runtime data 11 | pids 12 | *.pid 13 | *.seed 14 | *.pid.lock 15 | 16 | # Directory for instrumented libs generated by jscoverage/JSCover 17 | lib-cov 18 | 19 | # Coverage directory used by tools like istanbul 20 | coverage 21 | 22 | # nyc test coverage 23 | .nyc_output 24 | 25 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 26 | .grunt 27 | 28 | # Bower dependency directory (https://bower.io/) 29 | bower_components 30 | 31 | # node-waf configuration 32 | .lock-wscript 33 | 34 | # Compiled binary addons (https://nodejs.org/api/addons.html) 35 | build/Release 36 | 37 | # Dependency directories 38 | node_modules/ 39 | jspm_packages/ 40 | 41 | # TypeScript v1 declaration files 42 | typings/ 43 | 44 | # Optional npm cache directory 45 | .npm 46 | 47 | # Optional eslint cache 48 | .eslintcache 49 | 50 | # Optional REPL history 51 | .node_repl_history 52 | 53 | # Output of 'npm pack' 54 | *.tgz 55 | 56 | # Yarn Integrity file 57 | .yarn-integrity 58 | 59 | # dotenv environment variables file 60 | .env 61 | 62 | # parcel-bundler cache (https://parceljs.org/) 63 | .cache 64 | 65 | # next.js build output 66 | .next 67 | 68 | # nuxt.js build output 69 | .nuxt 70 | 71 | # Nuxt generate 72 | dist 73 | 74 | # vuepress build output 75 | .vuepress/dist 76 | 77 | # Serverless directories 78 | .serverless 79 | 80 | # IDE / Editor 81 | .idea 82 | 83 | # Service worker 84 | sw.* 85 | 86 | # macOS 87 | .DS_Store 88 | 89 | # Vim swap files 90 | *.swp 91 | -------------------------------------------------------------------------------- /foodapp-solution3/assets/README.md: -------------------------------------------------------------------------------- 1 | # ASSETS 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains your un-compiled assets such as LESS, SASS, or JavaScript. 6 | 7 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/assets#webpacked). 8 | -------------------------------------------------------------------------------- /foodapp-solution3/assets/headerimg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sdras/building-web-apps-with-vue/569c837a70ae27014cb4d61c22c77c4efa2e0c39/foodapp-solution3/assets/headerimg.jpg -------------------------------------------------------------------------------- /foodapp-solution3/components/AppEmptyCart.vue: -------------------------------------------------------------------------------- 1 | 25 | 26 | 35 | 36 | 37 | -------------------------------------------------------------------------------- /foodapp-solution3/components/AppFooter.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | -------------------------------------------------------------------------------- /foodapp-solution3/components/AppHeader.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 17 | 18 | 46 | -------------------------------------------------------------------------------- /foodapp-solution3/components/AppLogo.vue: -------------------------------------------------------------------------------- 1 | 27 | 28 | 31 | 32 | 58 | -------------------------------------------------------------------------------- /foodapp-solution3/components/AppMenu.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /foodapp-solution3/components/AppRestaurantInfo.vue: -------------------------------------------------------------------------------- 1 | 31 | 32 | 46 | 47 | 49 | -------------------------------------------------------------------------------- /foodapp-solution3/components/AppSelect.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /foodapp-solution3/components/AppToast.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 10 | 11 | 13 | -------------------------------------------------------------------------------- /foodapp-solution3/components/README.md: -------------------------------------------------------------------------------- 1 | # COMPONENTS 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | The components directory contains your Vue.js Components. 6 | 7 | _Nuxt.js doesn't supercharge these components._ 8 | -------------------------------------------------------------------------------- /foodapp-solution3/layouts/README.md: -------------------------------------------------------------------------------- 1 | # LAYOUTS 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains your Application Layouts. 6 | 7 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/views#layouts). 8 | -------------------------------------------------------------------------------- /foodapp-solution3/layouts/default.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 22 | 23 | 52 | -------------------------------------------------------------------------------- /foodapp-solution3/middleware/README.md: -------------------------------------------------------------------------------- 1 | # MIDDLEWARE 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains your application middleware. 6 | Middleware let you define custom functions that can be run before rendering either a page or a group of pages. 7 | 8 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/routing#middleware). 9 | -------------------------------------------------------------------------------- /foodapp-solution3/nuxt.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | /* 3 | ** Nuxt rendering mode 4 | ** See https://nuxtjs.org/api/configuration-mode 5 | */ 6 | mode: "universal", 7 | /* 8 | ** Nuxt target 9 | ** See https://nuxtjs.org/api/configuration-target 10 | */ 11 | target: "static", 12 | /* 13 | ** Headers of the page 14 | ** See https://nuxtjs.org/api/configuration-head 15 | */ 16 | head: { 17 | title: "Nuxt Food App", 18 | meta: [{ 19 | charset: "utf-8" 20 | }, 21 | { 22 | name: "viewport", 23 | content: "width=device-width, initial-scale=1" 24 | }, 25 | { 26 | hid: "description", 27 | name: "description", 28 | content: "Demo of Nuxt and Vue" 29 | } 30 | ], 31 | link: [{ 32 | rel: "icon", 33 | type: "image/x-icon", 34 | href: "/favicon.ico" 35 | }, 36 | { 37 | rel: "stylesheet", 38 | href: "https://fonts.googleapis.com/css2?family=Mulish:wght@300&family=Poppins:wght@600&display=swap" 39 | } 40 | ] 41 | }, 42 | /* 43 | ** Global CSS 44 | */ 45 | css: ["~/assets/main.scss"], 46 | /* 47 | ** Plugins to load before mounting the App 48 | ** https://nuxtjs.org/guide/plugins 49 | */ 50 | plugins: ["~/plugins/getfood.server.js"], 51 | /* 52 | ** Auto import components 53 | ** See https://nuxtjs.org/api/configuration-components 54 | */ 55 | components: true, 56 | /* 57 | ** Nuxt.js dev-modules 58 | */ 59 | buildModules: [], 60 | /* 61 | ** Nuxt.js modules 62 | */ 63 | modules: [], 64 | /* 65 | ** Build configuration 66 | ** See https://nuxtjs.org/api/configuration-build/ 67 | */ 68 | build: {} 69 | }; 70 | -------------------------------------------------------------------------------- /foodapp-solution3/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "foodapp", 3 | "version": "1.0.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "nuxt", 7 | "build": "nuxt build", 8 | "start": "nuxt start", 9 | "generate": "nuxt generate" 10 | }, 11 | "dependencies": { 12 | "@vue/composition-api": "^1.0.0-beta.10", 13 | "node-sass": "^4.14.1", 14 | "nuxt": "^2.14.0", 15 | "sass-loader": "^9.0.3", 16 | "uuid": "^8.3.0" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /foodapp-solution3/pages/README.md: -------------------------------------------------------------------------------- 1 | # PAGES 2 | 3 | This directory contains your Application Views and Routes. 4 | The framework reads all the `*.vue` files inside this directory and creates the router of your application. 5 | 6 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/routing). 7 | -------------------------------------------------------------------------------- /foodapp-solution3/pages/cart.vue: -------------------------------------------------------------------------------- 1 | 40 | 41 | 58 | 59 | 60 | -------------------------------------------------------------------------------- /foodapp-solution3/pages/index.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /foodapp-solution3/pages/restaurants.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 44 | 45 | 47 | -------------------------------------------------------------------------------- /foodapp-solution3/plugins/README.md: -------------------------------------------------------------------------------- 1 | # PLUGINS 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains Javascript plugins that you want to run before mounting the root Vue.js application. 6 | 7 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/plugins). 8 | -------------------------------------------------------------------------------- /foodapp-solution3/plugins/getfood.server.js: -------------------------------------------------------------------------------- 1 | export default async ({ 2 | store 3 | }) => { 4 | await store.dispatch('getFoodData') 5 | } 6 | -------------------------------------------------------------------------------- /foodapp-solution3/static/README.md: -------------------------------------------------------------------------------- 1 | # STATIC 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains your static files. 6 | Each file inside this directory is mapped to `/`. 7 | Thus you'd want to delete this README.md before deploying to production. 8 | 9 | Example: `/static/robots.txt` is mapped as `/robots.txt`. 10 | 11 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/assets#static). 12 | -------------------------------------------------------------------------------- /foodapp-solution3/static/dimsum-eggplant.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sdras/building-web-apps-with-vue/569c837a70ae27014cb4d61c22c77c4efa2e0c39/foodapp-solution3/static/dimsum-eggplant.jpg -------------------------------------------------------------------------------- /foodapp-solution3/static/dimsum-shrimp.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sdras/building-web-apps-with-vue/569c837a70ae27014cb4d61c22c77c4efa2e0c39/foodapp-solution3/static/dimsum-shrimp.jpg -------------------------------------------------------------------------------- /foodapp-solution3/static/dimsum-soup.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sdras/building-web-apps-with-vue/569c837a70ae27014cb4d61c22c77c4efa2e0c39/foodapp-solution3/static/dimsum-soup.jpg -------------------------------------------------------------------------------- /foodapp-solution3/static/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sdras/building-web-apps-with-vue/569c837a70ae27014cb4d61c22c77c4efa2e0c39/foodapp-solution3/static/favicon.ico -------------------------------------------------------------------------------- /foodapp-solution3/static/pizza-meat.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sdras/building-web-apps-with-vue/569c837a70ae27014cb4d61c22c77c4efa2e0c39/foodapp-solution3/static/pizza-meat.jpg -------------------------------------------------------------------------------- /foodapp-solution3/static/pizza-plain.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sdras/building-web-apps-with-vue/569c837a70ae27014cb4d61c22c77c4efa2e0c39/foodapp-solution3/static/pizza-plain.jpg -------------------------------------------------------------------------------- /foodapp-solution3/static/pizza-veggie.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sdras/building-web-apps-with-vue/569c837a70ae27014cb4d61c22c77c4efa2e0c39/foodapp-solution3/static/pizza-veggie.jpg -------------------------------------------------------------------------------- /foodapp-solution3/static/taco-burrito.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sdras/building-web-apps-with-vue/569c837a70ae27014cb4d61c22c77c4efa2e0c39/foodapp-solution3/static/taco-burrito.jpg -------------------------------------------------------------------------------- /foodapp-solution3/static/taco-quesadilla.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sdras/building-web-apps-with-vue/569c837a70ae27014cb4d61c22c77c4efa2e0c39/foodapp-solution3/static/taco-quesadilla.png -------------------------------------------------------------------------------- /foodapp-solution3/static/taco-taco.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sdras/building-web-apps-with-vue/569c837a70ae27014cb4d61c22c77c4efa2e0c39/foodapp-solution3/static/taco-taco.jpg -------------------------------------------------------------------------------- /foodapp-solution3/store/README.md: -------------------------------------------------------------------------------- 1 | # STORE 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains your Vuex Store files. 6 | Vuex Store option is implemented in the Nuxt.js framework. 7 | 8 | Creating a file in this directory automatically activates the option in the framework. 9 | 10 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/vuex-store). 11 | -------------------------------------------------------------------------------- /foodapp-solution3/store/index.js: -------------------------------------------------------------------------------- 1 | import { 2 | v4 as uuidv4 3 | } from "uuid"; 4 | 5 | export const state = () => ({ 6 | cart: [], 7 | fooddata: [] 8 | }); 9 | 10 | export const getters = { 11 | cartCount: state => { 12 | if (!state.cart.length) return 0; 13 | return state.cart.reduce((ac, next) => ac + +next.count, 0); 14 | }, 15 | totalPrice: state => { 16 | if (!state.cart.length) return 0; 17 | return state.cart.reduce((ac, next) => ac + +next.combinedPrice, 0); 18 | } 19 | }; 20 | 21 | export const mutations = { 22 | addToCart: (state, formOutput) => { 23 | formOutput.id = uuidv4(); 24 | state.cart.push(formOutput); 25 | }, 26 | updateFoodData: (state, data) => { 27 | state.fooddata = data; 28 | } 29 | }; 30 | 31 | export const actions = { 32 | async getFoodData({ 33 | state, 34 | commit 35 | }) { 36 | if (state.fooddata.length) return; 37 | 38 | try { 39 | await fetch( 40 | "https://dva9vm8f1h.execute-api.us-east-2.amazonaws.com/production/restaurants", { 41 | headers: { 42 | "Content-Type": "application/json", 43 | "x-api-key": process.env.AWS_API_KEY 44 | } 45 | } 46 | ) 47 | .then(response => response.json()) 48 | .then(data => { 49 | commit("updateFoodData", data); 50 | }); 51 | } catch (err) { 52 | console.log(err); 53 | } 54 | } 55 | }; 56 | -------------------------------------------------------------------------------- /game-problem/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | # local env files 6 | .env.local 7 | .env.*.local 8 | 9 | # Log files 10 | npm-debug.log* 11 | yarn-debug.log* 12 | yarn-error.log* 13 | pnpm-debug.log* 14 | 15 | # Editor directories and files 16 | .idea 17 | .vscode 18 | *.suo 19 | *.ntvs* 20 | *.njsproj 21 | *.sln 22 | *.sw? 23 | -------------------------------------------------------------------------------- /game-problem/README.md: -------------------------------------------------------------------------------- 1 | # alienzombie-game 2 | 3 | ## Project setup 4 | ``` 5 | yarn install 6 | ``` 7 | 8 | ### Compiles and hot-reloads for development 9 | ``` 10 | yarn run serve 11 | ``` 12 | 13 | ### Compiles and minifies for production 14 | ``` 15 | yarn run build 16 | ``` 17 | 18 | ### Run your tests 19 | ``` 20 | yarn run test 21 | ``` 22 | 23 | ### Lints and fixes files 24 | ``` 25 | yarn run lint 26 | ``` 27 | 28 | ### Customize configuration 29 | See [Configuration Reference](https://cli.vuejs.org/config/). 30 | -------------------------------------------------------------------------------- /game-problem/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/cli-plugin-babel/preset' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /game-problem/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "alienzombie-game", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "serve": "vue-cli-service serve", 7 | "build": "vue-cli-service build" 8 | }, 9 | "dependencies": { 10 | "core-js": "^3.6.5", 11 | "gsap": "^3.5.1", 12 | "vue": "^2.6.11", 13 | "vuex": "^3.4.0" 14 | }, 15 | "devDependencies": { 16 | "@vue/cli-plugin-babel": "^4.4.0", 17 | "@vue/cli-service": "^4.4.0", 18 | "node-sass": "^4.12.0", 19 | "sass-loader": "^8.0.2", 20 | "vue-template-compiler": "^2.6.11" 21 | }, 22 | "browserslist": [ 23 | "> 1%", 24 | "last 2 versions", 25 | "not dead" 26 | ] 27 | } 28 | -------------------------------------------------------------------------------- /game-problem/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sdras/building-web-apps-with-vue/569c837a70ae27014cb4d61c22c77c4efa2e0c39/game-problem/public/favicon.ico -------------------------------------------------------------------------------- /game-problem/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | <%= htmlWebpackPlugin.options.title %> 9 | 13 | 14 | 15 | 22 |
23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /game-problem/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sdras/building-web-apps-with-vue/569c837a70ae27014cb4d61c22c77c4efa2e0c39/game-problem/src/assets/logo.png -------------------------------------------------------------------------------- /game-problem/src/components/Friend.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /game-problem/src/components/GamestateFinish.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 7 | 8 | 10 | -------------------------------------------------------------------------------- /game-problem/src/components/GamestateStart.vue: -------------------------------------------------------------------------------- 1 | 16 | 17 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /game-problem/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | import store from './store' 4 | 5 | Vue.config.productionTip = false 6 | 7 | new Vue({ 8 | store, 9 | render: h => h(App) 10 | }).$mount('#app') 11 | -------------------------------------------------------------------------------- /game-problem/src/store/index.js: -------------------------------------------------------------------------------- 1 | import Vue from "vue" 2 | import Vuex from "vuex" 3 | 4 | Vue.use(Vuex) 5 | 6 | export default new Vuex.Store({ 7 | state: { 8 | uiState: "start", 9 | score: 0, 10 | character: "", 11 | characterChoices: ["baker", "mechanic", "artist"], 12 | questionIndex: 0, 13 | questions: [{ 14 | question: `What's your dog's name?`, 15 | baker: "Woofgang Puck", 16 | mechanic: "Alf", 17 | artist: "Salvador Dogi", 18 | }, 19 | { 20 | question: `What's your favorite hobby?`, 21 | baker: "Extreme ironing", 22 | mechanic: "Bacon santa cosplay", 23 | artist: "Mimosas", 24 | }, 25 | { 26 | question: `What's your favorite color?`, 27 | baker: "turquoise", 28 | mechanic: "yellow", 29 | artist: "transparent", 30 | }, 31 | { 32 | question: `Is cereal soup?`, 33 | baker: "You can't be serieal", 34 | mechanic: "Yes, I am Jason Lengstorf", 35 | artist: "wut", 36 | }, 37 | { 38 | question: `What’s the most imaginative insult you can come up with?`, 39 | baker: "You're a substitute teacher with no lesson plan", 40 | mechanic: "Yer face is a melted welly", 41 | artist: "You eat buttons off the remote", 42 | }, 43 | { 44 | question: `If peanut butter wasn’t called peanut butter, what would it be called?`, 45 | baker: "legoome", 46 | mechanic: "brown paste", 47 | artist: "groundnut smoosh", 48 | }, 49 | ], 50 | }, 51 | mutations: { 52 | updateCharacter(state, choice) { 53 | state.character = choice 54 | }, 55 | updateScore(state, amount) { 56 | state.score = amount 57 | }, 58 | updateUIState(state, uistate) { 59 | state.uiState = uistate 60 | }, 61 | pickQuestion(state, character) { 62 | character === state.character ? (state.score += 13) : (state.score -= 13) 63 | 64 | if (state.questionIndex < state.questions.length - 1) { 65 | state.questionIndex++ 66 | } else { 67 | Math.sign(state.score) > 0 ? 68 | (state.uiState = "won") : 69 | (state.uiState = "lost") 70 | } 71 | }, 72 | }, 73 | }) -------------------------------------------------------------------------------- /game-solution/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | # local env files 6 | .env.local 7 | .env.*.local 8 | 9 | # Log files 10 | npm-debug.log* 11 | yarn-debug.log* 12 | yarn-error.log* 13 | pnpm-debug.log* 14 | 15 | # Editor directories and files 16 | .idea 17 | .vscode 18 | *.suo 19 | *.ntvs* 20 | *.njsproj 21 | *.sln 22 | *.sw? 23 | -------------------------------------------------------------------------------- /game-solution/README.md: -------------------------------------------------------------------------------- 1 | # alienzombie-game 2 | 3 | ## Project setup 4 | ``` 5 | yarn install 6 | ``` 7 | 8 | ### Compiles and hot-reloads for development 9 | ``` 10 | yarn run serve 11 | ``` 12 | 13 | ### Compiles and minifies for production 14 | ``` 15 | yarn run build 16 | ``` 17 | 18 | ### Run your tests 19 | ``` 20 | yarn run test 21 | ``` 22 | 23 | ### Lints and fixes files 24 | ``` 25 | yarn run lint 26 | ``` 27 | 28 | ### Customize configuration 29 | See [Configuration Reference](https://cli.vuejs.org/config/). 30 | -------------------------------------------------------------------------------- /game-solution/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/cli-plugin-babel/preset' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /game-solution/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "alienzombie-game", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "serve": "vue-cli-service serve", 7 | "build": "vue-cli-service build" 8 | }, 9 | "dependencies": { 10 | "core-js": "^3.6.5", 11 | "gsap": "^3.4.2", 12 | "vue": "^2.6.11", 13 | "vuex": "^3.4.0" 14 | }, 15 | "devDependencies": { 16 | "@vue/cli-plugin-babel": "^4.4.0", 17 | "@vue/cli-service": "^4.4.0", 18 | "node-sass": "^4.12.0", 19 | "sass-loader": "^8.0.2", 20 | "vue-template-compiler": "^2.6.11" 21 | }, 22 | "browserslist": [ 23 | "> 1%", 24 | "last 2 versions", 25 | "not dead" 26 | ] 27 | } 28 | -------------------------------------------------------------------------------- /game-solution/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sdras/building-web-apps-with-vue/569c837a70ae27014cb4d61c22c77c4efa2e0c39/game-solution/public/favicon.ico -------------------------------------------------------------------------------- /game-solution/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | <%= htmlWebpackPlugin.options.title %> 9 | 13 | 14 | 15 | 22 |
23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /game-solution/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sdras/building-web-apps-with-vue/569c837a70ae27014cb4d61c22c77c4efa2e0c39/game-solution/src/assets/logo.png -------------------------------------------------------------------------------- /game-solution/src/components/GamestateFinish.vue: -------------------------------------------------------------------------------- 1 | 32 | 33 | 47 | 48 | 84 | -------------------------------------------------------------------------------- /game-solution/src/components/GamestateStart.vue: -------------------------------------------------------------------------------- 1 | 16 | 17 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /game-solution/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | import store from './store' 4 | 5 | Vue.config.productionTip = false 6 | 7 | new Vue({ 8 | store, 9 | render: h => h(App) 10 | }).$mount('#app') 11 | -------------------------------------------------------------------------------- /game-solution/src/store/index.js: -------------------------------------------------------------------------------- 1 | import Vue from "vue" 2 | import Vuex from "vuex" 3 | 4 | Vue.use(Vuex) 5 | 6 | export default new Vuex.Store({ 7 | state: { 8 | uiState: "start", 9 | score: 0, 10 | character: "", 11 | characterChoices: ["baker", "mechanic", "artist"], 12 | questionIndex: 0, 13 | questions: [{ 14 | question: `What's your dog's name?`, 15 | baker: "Woofgang Puck", 16 | mechanic: "Alf", 17 | artist: "Salvador Dogi", 18 | }, 19 | { 20 | question: `What's your favorite hobby?`, 21 | baker: "Extreme ironing", 22 | mechanic: "Bacon santa cosplay", 23 | artist: "Mimosas", 24 | }, 25 | { 26 | question: `What's your favorite color?`, 27 | baker: "turquoise", 28 | mechanic: "yellow", 29 | artist: "transparent", 30 | }, 31 | { 32 | question: `Is cereal soup?`, 33 | baker: "You can't be serieal", 34 | mechanic: "Yes, I am Jason Lengstorf", 35 | artist: "wut", 36 | }, 37 | { 38 | question: `What’s the most imaginative insult you can come up with?`, 39 | baker: "You're a substitute teacher with no lesson plan", 40 | mechanic: "Yer face is a melted welly", 41 | artist: "You eat buttons off the remote", 42 | }, 43 | { 44 | question: `If peanut butter wasn’t called peanut butter, what would it be called?`, 45 | baker: "legoome", 46 | mechanic: "brown paste", 47 | artist: "groundnut smoosh", 48 | }, 49 | ], 50 | }, 51 | mutations: { 52 | updateCharacter(state, choice) { 53 | state.character = choice 54 | }, 55 | updateScore(state, amount) { 56 | state.score = amount 57 | }, 58 | updateUIState(state, uistate) { 59 | state.uiState = uistate 60 | }, 61 | pickQuestion(state, character) { 62 | character === state.character ? (state.score += 13) : (state.score -= 13) 63 | 64 | if (state.questionIndex < state.questions.length - 1) { 65 | state.questionIndex++ 66 | } else { 67 | Math.sign(state.score) > 0 ? 68 | (state.uiState = "won") : 69 | (state.uiState = "lost") 70 | } 71 | }, 72 | restartGame(state) { 73 | state.uiState = "start" 74 | state.score = 0 75 | state.questionIndex = 0 76 | }, 77 | }, 78 | }) -------------------------------------------------------------------------------- /gameresources/components/Friend.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /gameresources/graphics/basesvg.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | Character Name 17 | 18 | 19 | 20 | 21 | 26 | 31 | 32 | 33 | 34 | 39 | 44 | 45 | -------------------------------------------------------------------------------- /gameresources/graphics/face.svg: -------------------------------------------------------------------------------- 1 | 9 | Face Icon 10 | 11 | 32 | 33 | 34 | 35 | 36 | 41 | -------------------------------------------------------------------------------- /gameresources/intro.html: -------------------------------------------------------------------------------- 1 |
2 |

You're an alienzombie.

3 |

4 | In order to survive on Earth, you have to pretend to be a human on this 5 | planet. You took over the body of a nearby hooman, but the trouble is, their 6 | best friend showed up! 7 |

8 |

9 | They look suspicious. Answer the questions right to make sure identity is 10 | kept secret! 11 |

12 |
-------------------------------------------------------------------------------- /gameresources/questions.js: -------------------------------------------------------------------------------- 1 | const questions = [ 2 | { 3 | question: `What's your dog's name?`, 4 | baker: "Woofgang Puck", 5 | mechanic: "Alf", 6 | artist: "Salvador Dogi", 7 | }, 8 | { 9 | question: `What's your favorite hobby?`, 10 | baker: "Extreme ironing", 11 | mechanic: "Bacon santa cosplay", 12 | artist: "Mimosas", 13 | }, 14 | { 15 | question: `What's your favorite color?`, 16 | baker: "turquoise", 17 | mechanic: "yellow", 18 | artist: "transparent", 19 | }, 20 | { 21 | question: `Is cereal soup?`, 22 | baker: "You can't be serieal", 23 | mechanic: "Yes, I am Jason Lengstorf", 24 | artist: "wut", 25 | }, 26 | { 27 | question: `What’s the most imaginative insult you can come up with?`, 28 | baker: "You're a substitute teacher with no lesson plan", 29 | mechanic: "Yer face is a melted welly", 30 | artist: "You eat buttons off the remote", 31 | }, 32 | { 33 | question: `If peanut butter wasn’t called peanut butter, what would it be called?`, 34 | baker: "legoome", 35 | mechanic: "brown paste", 36 | artist: "groundnut smoosh", 37 | }, 38 | ], --------------------------------------------------------------------------------