├── .gitignore ├── .vscode └── settings.json ├── 01 └── readme.txt ├── 02-getting-started ├── end │ └── vue-heroes │ │ ├── .browserslistrc │ │ ├── .eslintrc.js │ │ ├── .prettierrc.js │ │ ├── .vscode │ │ ├── launch.json │ │ └── settings.json │ │ ├── README.md │ │ ├── babel.config.js │ │ ├── package-lock.json │ │ ├── package.json │ │ ├── postcss.config.js │ │ ├── public │ │ ├── favicon.ico │ │ └── index.html │ │ ├── src │ │ ├── app.vue │ │ ├── assets │ │ │ └── logo.png │ │ ├── components │ │ │ ├── header-bar-brand.vue │ │ │ ├── header-bar-links.vue │ │ │ └── header-bar.vue │ │ ├── design │ │ │ ├── _bulma.scss │ │ │ ├── _styles.scss │ │ │ ├── _variables.scss │ │ │ └── index.scss │ │ ├── main.js │ │ └── views │ │ │ └── about.vue │ │ └── vue.config.js └── index.html ├── 03-data-and-events ├── begin │ └── vue-heroes │ │ ├── .browserslistrc │ │ ├── .eslintrc.js │ │ ├── .prettierrc.js │ │ ├── .vscode │ │ ├── launch.json │ │ └── settings.json │ │ ├── README.md │ │ ├── babel.config.js │ │ ├── package-lock.json │ │ ├── package.json │ │ ├── postcss.config.js │ │ ├── public │ │ ├── favicon.ico │ │ └── index.html │ │ ├── src │ │ ├── app.vue │ │ ├── assets │ │ │ └── logo.png │ │ ├── components │ │ │ ├── header-bar-brand.vue │ │ │ ├── header-bar-links.vue │ │ │ ├── header-bar.vue │ │ │ └── heroes.vue │ │ ├── design │ │ │ ├── _bulma.scss │ │ │ ├── _styles.scss │ │ │ ├── _variables.scss │ │ │ └── index.scss │ │ ├── main.js │ │ └── views │ │ │ └── about.vue │ │ └── vue.config.js └── end │ └── vue-heroes │ ├── .browserslistrc │ ├── .eslintrc.js │ ├── .prettierrc.js │ ├── .vscode │ ├── launch.json │ └── settings.json │ ├── babel.config.js │ ├── package-lock.json │ ├── package.json │ ├── public │ ├── favicon.ico │ └── index.html │ ├── src │ ├── app.vue │ ├── assets │ │ └── logo.png │ ├── components │ │ ├── header-bar-brand.vue │ │ ├── header-bar-links.vue │ │ ├── header-bar.vue │ │ └── heroes.vue │ ├── design │ │ ├── _bulma.scss │ │ ├── _styles.scss │ │ ├── _variables.scss │ │ └── index.scss │ ├── main.js │ └── views │ │ └── about.vue │ └── vue.config.js ├── 04-lists-and-conditionals ├── begin │ └── vue-heroes │ │ ├── .browserslistrc │ │ ├── .eslintrc.js │ │ ├── .prettierrc.js │ │ ├── .vscode │ │ ├── launch.json │ │ └── settings.json │ │ ├── babel.config.js │ │ ├── package-lock.json │ │ ├── package.json │ │ ├── public │ │ ├── favicon.ico │ │ └── index.html │ │ ├── src │ │ ├── app.vue │ │ ├── assets │ │ │ └── logo.png │ │ ├── components │ │ │ ├── header-bar-brand.vue │ │ │ ├── header-bar-links.vue │ │ │ ├── header-bar.vue │ │ │ └── heroes.vue │ │ ├── design │ │ │ ├── _bulma.scss │ │ │ ├── _styles.scss │ │ │ ├── _variables.scss │ │ │ └── index.scss │ │ ├── main.js │ │ └── views │ │ │ └── about.vue │ │ └── vue.config.js └── end │ └── vue-heroes │ ├── .browserslistrc │ ├── .eslintrc.js │ ├── .prettierrc.js │ ├── .vscode │ ├── launch.json │ └── settings.json │ ├── babel.config.js │ ├── package-lock.json │ ├── package.json │ ├── public │ ├── favicon.ico │ └── index.html │ ├── src │ ├── app.vue │ ├── assets │ │ └── logo.png │ ├── components │ │ ├── header-bar-brand.vue │ │ ├── header-bar-links.vue │ │ ├── header-bar.vue │ │ └── heroes.vue │ ├── design │ │ ├── _bulma.scss │ │ ├── _styles.scss │ │ ├── _variables.scss │ │ └── index.scss │ ├── main.js │ └── views │ │ └── about.vue │ └── vue.config.js ├── 05-interacting-within-a-component ├── begin │ └── vue-heroes │ │ ├── .browserslistrc │ │ ├── .eslintrc.js │ │ ├── .prettierrc.js │ │ ├── .vscode │ │ ├── launch.json │ │ └── settings.json │ │ ├── babel.config.js │ │ ├── package-lock.json │ │ ├── package.json │ │ ├── public │ │ ├── favicon.ico │ │ └── index.html │ │ ├── src │ │ ├── app.vue │ │ ├── assets │ │ │ └── logo.png │ │ ├── components │ │ │ ├── header-bar-brand.vue │ │ │ ├── header-bar-links.vue │ │ │ ├── header-bar.vue │ │ │ └── heroes.vue │ │ ├── design │ │ │ ├── _bulma.scss │ │ │ ├── _styles.scss │ │ │ ├── _variables.scss │ │ │ └── index.scss │ │ ├── main.js │ │ └── views │ │ │ └── about.vue │ │ └── vue.config.js └── end │ └── vue-heroes │ ├── .browserslistrc │ ├── .eslintrc.js │ ├── .prettierrc.js │ ├── .vscode │ ├── launch.json │ └── settings.json │ ├── babel.config.js │ ├── package-lock.json │ ├── package.json │ ├── public │ ├── favicon.ico │ └── index.html │ ├── src │ ├── app.vue │ ├── assets │ │ └── logo.png │ ├── components │ │ ├── header-bar-brand.vue │ │ ├── header-bar-links.vue │ │ ├── header-bar.vue │ │ └── heroes.vue │ ├── design │ │ ├── _bulma.scss │ │ ├── _styles.scss │ │ ├── _variables.scss │ │ └── index.scss │ ├── main.js │ └── views │ │ └── about.vue │ └── vue.config.js ├── 06-component-communication ├── begin │ └── vue-heroes │ │ ├── .browserslistrc │ │ ├── .eslintrc.js │ │ ├── .prettierrc.js │ │ ├── .vscode │ │ ├── launch.json │ │ └── settings.json │ │ ├── babel.config.js │ │ ├── package-lock.json │ │ ├── package.json │ │ ├── public │ │ ├── favicon.ico │ │ └── index.html │ │ ├── src │ │ ├── app.vue │ │ ├── assets │ │ │ └── logo.png │ │ ├── components │ │ │ ├── header-bar-brand.vue │ │ │ ├── header-bar-links.vue │ │ │ ├── header-bar.vue │ │ │ └── heroes.vue │ │ ├── design │ │ │ ├── _bulma.scss │ │ │ ├── _styles.scss │ │ │ ├── _variables.scss │ │ │ └── index.scss │ │ ├── main.js │ │ ├── shared │ │ │ ├── constants.js │ │ │ ├── data.js │ │ │ ├── index.js │ │ │ ├── logger.js │ │ │ └── logging-mixins.js │ │ └── views │ │ │ └── about.vue │ │ └── vue.config.js └── end │ └── vue-heroes │ ├── .browserslistrc │ ├── .eslintrc.js │ ├── .prettierrc.js │ ├── .vscode │ ├── launch.json │ └── settings.json │ ├── babel.config.js │ ├── package-lock.json │ ├── package.json │ ├── public │ ├── favicon.ico │ └── index.html │ ├── src │ ├── app.vue │ ├── assets │ │ └── logo.png │ ├── components │ │ ├── header-bar-brand.vue │ │ ├── header-bar-links.vue │ │ ├── header-bar.vue │ │ ├── hero-detail.vue │ │ └── heroes.vue │ ├── design │ │ ├── _bulma.scss │ │ ├── _styles.scss │ │ ├── _variables.scss │ │ └── index.scss │ ├── main.js │ ├── shared │ │ ├── constants.js │ │ ├── data.js │ │ ├── index.js │ │ ├── logger.js │ │ └── logging-mixins.js │ └── views │ │ └── about.vue │ └── vue.config.js ├── 07-accessing-data ├── begin │ └── vue-heroes │ │ ├── .browserslistrc │ │ ├── .env │ │ ├── .env.development │ │ ├── .eslintrc.js │ │ ├── .prettierrc.js │ │ ├── .vscode │ │ ├── launch.json │ │ └── settings.json │ │ ├── babel.config.js │ │ ├── package-lock.json │ │ ├── package.json │ │ ├── public │ │ ├── api │ │ │ └── heroes.json │ │ ├── favicon.ico │ │ └── index.html │ │ ├── src │ │ ├── app.vue │ │ ├── assets │ │ │ └── logo.png │ │ ├── components │ │ │ ├── header-bar-brand.vue │ │ │ ├── header-bar-links.vue │ │ │ ├── header-bar.vue │ │ │ ├── hero-detail.vue │ │ │ └── heroes.vue │ │ ├── design │ │ │ ├── _bulma.scss │ │ │ ├── _styles.scss │ │ │ ├── _variables.scss │ │ │ └── index.scss │ │ ├── main.js │ │ ├── shared │ │ │ ├── constants.js │ │ │ ├── data.js │ │ │ ├── index.js │ │ │ ├── logger.js │ │ │ └── logging-mixins.js │ │ └── views │ │ │ └── about.vue │ │ └── vue.config.js └── end │ └── vue-heroes │ ├── .browserslistrc │ ├── .env │ ├── .env.development │ ├── .eslintrc.js │ ├── .prettierrc.js │ ├── .vscode │ ├── launch.json │ └── settings.json │ ├── babel.config.js │ ├── package-lock.json │ ├── package.json │ ├── public │ ├── api │ │ └── heroes.json │ ├── favicon.ico │ └── index.html │ ├── src │ ├── app.vue │ ├── assets │ │ └── logo.png │ ├── components │ │ ├── header-bar-brand.vue │ │ ├── header-bar-links.vue │ │ ├── header-bar.vue │ │ ├── hero-detail.vue │ │ └── heroes.vue │ ├── design │ │ ├── _bulma.scss │ │ ├── _styles.scss │ │ ├── _variables.scss │ │ └── index.scss │ ├── main.js │ ├── shared │ │ ├── config.js │ │ ├── constants.js │ │ ├── data.js │ │ ├── index.js │ │ ├── logger.js │ │ └── logging-mixins.js │ └── views │ │ └── about.vue │ └── vue.config.js ├── 08-routing ├── begin │ └── vue-heroes │ │ ├── .browserslistrc │ │ ├── .env │ │ ├── .env.development │ │ ├── .eslintrc.js │ │ ├── .prettierrc.js │ │ ├── .vscode │ │ ├── launch.json │ │ └── settings.json │ │ ├── babel.config.js │ │ ├── db.json │ │ ├── package-lock.json │ │ ├── package.json │ │ ├── public │ │ ├── favicon.ico │ │ └── index.html │ │ ├── routes.json │ │ ├── src │ │ ├── app.vue │ │ ├── assets │ │ │ └── logo.png │ │ ├── components │ │ │ ├── header-bar-brand.vue │ │ │ ├── header-bar-links.vue │ │ │ ├── header-bar.vue │ │ │ ├── hero-detail.vue │ │ │ └── heroes.vue │ │ ├── design │ │ │ ├── _bulma.scss │ │ │ ├── _styles.scss │ │ │ ├── _variables.scss │ │ │ └── index.scss │ │ ├── main.js │ │ ├── shared │ │ │ ├── config.js │ │ │ ├── constants.js │ │ │ ├── data.service.js │ │ │ ├── index.js │ │ │ ├── logger.js │ │ │ └── logging-mixins.js │ │ └── views │ │ │ ├── about.vue │ │ │ └── page-not-found.vue │ │ └── vue.config.js └── end │ └── vue-heroes │ ├── .browserslistrc │ ├── .env │ ├── .env.development │ ├── .eslintrc.js │ ├── .prettierrc.js │ ├── .vscode │ ├── launch.json │ └── settings.json │ ├── babel.config.js │ ├── db.json │ ├── package-lock.json │ ├── package.json │ ├── public │ ├── favicon.ico │ └── index.html │ ├── routes.json │ ├── src │ ├── app.vue │ ├── assets │ │ └── logo.png │ ├── components │ │ ├── header-bar-brand.vue │ │ ├── header-bar-links.vue │ │ ├── header-bar.vue │ │ └── nav-bar.vue │ ├── design │ │ ├── _bulma.scss │ │ ├── _styles.scss │ │ ├── _variables.scss │ │ └── index.scss │ ├── main.js │ ├── router.js │ ├── shared │ │ ├── config.js │ │ ├── constants.js │ │ ├── data.service.js │ │ ├── index.js │ │ ├── logger.js │ │ └── logging-mixins.js │ └── views │ │ ├── about.vue │ │ ├── hero-detail.vue │ │ ├── heroes.vue │ │ └── page-not-found.vue │ └── vue.config.js ├── 09-managing-state ├── begin │ └── vue-heroes │ │ ├── .browserslistrc │ │ ├── .env │ │ ├── .env.development │ │ ├── .eslintrc.js │ │ ├── .prettierrc.js │ │ ├── .vscode │ │ ├── launch.json │ │ └── settings.json │ │ ├── babel.config.js │ │ ├── db.json │ │ ├── package-lock.json │ │ ├── package.json │ │ ├── public │ │ ├── favicon.ico │ │ └── index.html │ │ ├── routes.json │ │ ├── src │ │ ├── app.vue │ │ ├── assets │ │ │ └── logo.png │ │ ├── components │ │ │ ├── header-bar-brand.vue │ │ │ ├── header-bar-links.vue │ │ │ ├── header-bar.vue │ │ │ ├── modal.vue │ │ │ └── nav-bar.vue │ │ ├── design │ │ │ ├── _bulma.scss │ │ │ ├── _styles.scss │ │ │ ├── _variables.scss │ │ │ └── index.scss │ │ ├── main.js │ │ ├── router.js │ │ ├── shared │ │ │ ├── config.js │ │ │ ├── constants.js │ │ │ ├── data.service.js │ │ │ ├── index.js │ │ │ ├── logger.js │ │ │ └── logging-mixins.js │ │ └── views │ │ │ ├── about.vue │ │ │ ├── hero-detail.vue │ │ │ ├── heroes.vue │ │ │ └── page-not-found.vue │ │ └── vue.config.js └── end │ └── vue-heroes │ ├── .browserslistrc │ ├── .env │ ├── .env.development │ ├── .eslintrc.js │ ├── .prettierrc.js │ ├── .vscode │ ├── launch.json │ └── settings.json │ ├── babel.config.js │ ├── db.json │ ├── package-lock.json │ ├── package.json │ ├── public │ ├── favicon.ico │ └── index.html │ ├── routes.json │ ├── src │ ├── app.vue │ ├── assets │ │ └── logo.png │ ├── components │ │ ├── header-bar-brand.vue │ │ ├── header-bar-links.vue │ │ ├── header-bar.vue │ │ ├── modal.vue │ │ └── nav-bar.vue │ ├── design │ │ ├── _bulma.scss │ │ ├── _styles.scss │ │ ├── _variables.scss │ │ └── index.scss │ ├── main.js │ ├── router.js │ ├── shared │ │ ├── config.js │ │ ├── constants.js │ │ ├── data.service.js │ │ ├── index.js │ │ ├── logger.js │ │ └── logging-mixins.js │ ├── store │ │ ├── index.js │ │ └── mutation-types.js │ └── views │ │ ├── about.vue │ │ ├── hero-detail.vue │ │ ├── heroes.vue │ │ └── page-not-found.vue │ └── vue.config.js ├── README.md └── xx-final └── vue-heroes ├── .browserslistrc ├── .env ├── .env.development ├── .eslintrc.js ├── .prettierrc.js ├── .vscode ├── launch.json └── settings.json ├── babel.config.js ├── db.json ├── package-lock.json ├── package.json ├── public ├── favicon.ico └── index.html ├── routes.json ├── src ├── app.vue ├── assets │ └── logo.png ├── components │ ├── header-bar-brand.vue │ ├── header-bar-links.vue │ ├── header-bar.vue │ ├── modal.vue │ └── nav-bar.vue ├── design │ ├── _bulma.scss │ ├── _styles.scss │ ├── _variables.scss │ └── index.scss ├── main.js ├── router.js ├── shared │ ├── config.js │ ├── constants.js │ ├── data.service.js │ ├── index.js │ ├── logger.js │ └── logging-mixins.js ├── store │ ├── index.js │ └── mutation-types.js └── views │ ├── about.vue │ ├── hero-detail.vue │ ├── heroes.vue │ ├── page-not-found.vue │ ├── villain-detail.vue │ └── villains.vue └── vue.config.js /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | /**/vue-heroes/dist 5 | 6 | # local env files 7 | .env.local 8 | .env.*.local 9 | 10 | # Log files 11 | npm-debug.log* 12 | yarn-debug.log* 13 | yarn-error.log* 14 | 15 | # Editor directories and files 16 | .idea 17 | # .vscode 18 | *.suo 19 | *.ntvs* 20 | *.njsproj 21 | *.sln 22 | *.sw* 23 | 24 | foo.vue -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "workbench.colorCustomizations": { 3 | "activityBar.background": "#65c89b", 4 | "activityBar.activeBorder": "#945bc4", 5 | "activityBar.foreground": "#15202b", 6 | "activityBar.inactiveForeground": "#15202b99", 7 | "activityBarBadge.background": "#945bc4", 8 | "activityBarBadge.foreground": "#e7e7e7", 9 | "titleBar.activeBackground": "#42b883", 10 | "titleBar.inactiveBackground": "#42b88399", 11 | "titleBar.activeForeground": "#15202b", 12 | "titleBar.inactiveForeground": "#15202b99", 13 | "statusBar.background": "#42b883", 14 | "statusBarItem.hoverBackground": "#359268", 15 | "statusBar.foreground": "#15202b", 16 | "panel.border": "#65c89b", 17 | "sideBar.border": "#65c89b", 18 | "editorGroup.border": "#65c89b", 19 | "tab.activeBorder": "#65c89b" 20 | }, 21 | "peacock.color": "#42b883" 22 | } -------------------------------------------------------------------------------- /01/readme.txt: -------------------------------------------------------------------------------- 1 | Module 1 has no source code, as it is the brief introduction to the course. -------------------------------------------------------------------------------- /02-getting-started/end/vue-heroes/.browserslistrc: -------------------------------------------------------------------------------- 1 | > 1% 2 | last 2 versions 3 | -------------------------------------------------------------------------------- /02-getting-started/end/vue-heroes/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { 4 | node: true, 5 | }, 6 | extends: ['plugin:vue/essential', '@vue/prettier'], 7 | plugins: ['prettier'], 8 | // watch this for explaining why some of this is here 9 | // https://www.youtube.com/watch?time_continue=239&v=YIvjKId9m2c 10 | rules: { 11 | 'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off', 12 | 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off', 13 | quotes: [2, 'single', { avoidEscape: true, allowTemplateLiterals: true }], 14 | 'prettier/prettier': [ 15 | 'error', 16 | { 17 | trailingComma: 'es5', 18 | singleQuote: true, 19 | printWidth: 80, 20 | }, 21 | ], 22 | 'vue/no-unused-components': [ 23 | 'error', 24 | { 25 | ignoreWhenBindingPresent: true, 26 | }, 27 | ], 28 | }, 29 | parserOptions: { 30 | parser: 'babel-eslint', 31 | }, 32 | }; 33 | -------------------------------------------------------------------------------- /02-getting-started/end/vue-heroes/.prettierrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | printWidth: 80, 3 | tabWidth: 2, 4 | bracketSpacing: true, 5 | singleQuote: true, 6 | trailingComma: 'all', 7 | }; 8 | -------------------------------------------------------------------------------- /02-getting-started/end/vue-heroes/.vscode/launch.json: -------------------------------------------------------------------------------- 1 | { 2 | // Use IntelliSense to learn about possible attributes. 3 | // Hover to view descriptions of existing attributes. 4 | // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 5 | "version": "0.2.0", 6 | "configurations": [ 7 | { 8 | "type": "chrome", 9 | "request": "launch", 10 | "name": "Vue: Chrome", 11 | "url": "http://localhost:9626", 12 | "webRoot": "${workspaceFolder}/src", 13 | "breakOnLoad": true, 14 | "sourceMapPathOverrides": { 15 | "webpack:///src/*": "${webRoot}/*", 16 | "webpack:///./src/*": "${webRoot}/*", 17 | "webpack:///./*": "${webRoot}/*", 18 | "webpack:///*": "*", 19 | "webpack:///./~/*": "${webRoot}/node_modules/*", 20 | "meteor://💻app/*": "${webRoot}/*" 21 | } 22 | } 23 | ] 24 | } -------------------------------------------------------------------------------- /02-getting-started/end/vue-heroes/.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "eslint.enable": true, 3 | "workbench.colorCustomizations": { 4 | "activityBar.background": "#65c89b", 5 | "activityBar.foreground": "#15202b", 6 | "activityBar.inactiveForeground": "#15202b99", 7 | "activityBarBadge.background": "#945bc4", 8 | "activityBarBadge.foreground": "#e7e7e7", 9 | "statusBar.background": "#42b883", 10 | "statusBarItem.hoverBackground": "#359268", 11 | "statusBar.foreground": "#15202b" 12 | } 13 | } -------------------------------------------------------------------------------- /02-getting-started/end/vue-heroes/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: ['@vue/app'], 3 | }; 4 | -------------------------------------------------------------------------------- /02-getting-started/end/vue-heroes/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-heroes", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "serve": "vue-cli-service serve", 7 | "build": "vue-cli-service build", 8 | "lint": "vue-cli-service lint" 9 | }, 10 | "dependencies": { 11 | "core-js": "^2.6.5", 12 | "vue": "^2.6.10", 13 | "@fortawesome/fontawesome-svg-core": "^1.2.18", 14 | "@fortawesome/free-solid-svg-icons": "^5.8.2", 15 | "@fortawesome/vue-fontawesome": "^0.1.6", 16 | "bulma": "^0.7.5" 17 | }, 18 | "devDependencies": { 19 | "@vue/cli-plugin-babel": "^3.7.0", 20 | "@vue/cli-plugin-eslint": "^3.7.0", 21 | "@vue/cli-service": "^3.7.0", 22 | "@vue/eslint-config-prettier": "^4.0.1", 23 | "babel-eslint": "^10.0.1", 24 | "eslint": "^5.16.0", 25 | "eslint-plugin-vue": "^5.0.0", 26 | "node-sass": "^4.9.0", 27 | "sass-loader": "^7.1.0", 28 | "vue-template-compiler": "^2.5.21" 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /02-getting-started/end/vue-heroes/postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | autoprefixer: {}, 4 | }, 5 | }; 6 | -------------------------------------------------------------------------------- /02-getting-started/end/vue-heroes/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/johnpapa/vue-getting-started/2d37324d92c101d17291de37ae7575184790ef4c/02-getting-started/end/vue-heroes/public/favicon.ico -------------------------------------------------------------------------------- /02-getting-started/end/vue-heroes/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 14 | Vue Heroes 15 | 16 | 17 | 23 |
24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /02-getting-started/end/vue-heroes/src/app.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 19 | 20 | 23 | -------------------------------------------------------------------------------- /02-getting-started/end/vue-heroes/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/johnpapa/vue-getting-started/2d37324d92c101d17291de37ae7575184790ef4c/02-getting-started/end/vue-heroes/src/assets/logo.png -------------------------------------------------------------------------------- /02-getting-started/end/vue-heroes/src/components/header-bar-brand.vue: -------------------------------------------------------------------------------- 1 | 28 | -------------------------------------------------------------------------------- /02-getting-started/end/vue-heroes/src/components/header-bar-links.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | 28 | -------------------------------------------------------------------------------- /02-getting-started/end/vue-heroes/src/components/header-bar.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 23 | -------------------------------------------------------------------------------- /02-getting-started/end/vue-heroes/src/design/_variables.scss: -------------------------------------------------------------------------------- 1 | $vue: #42b883; 2 | $vue-light: #42b883; 3 | $primary: $vue; 4 | $primary-light: $vue-light; 5 | $link: $primary; 6 | $info: $primary; 7 | $shade-light: #fafafa; 8 | -------------------------------------------------------------------------------- /02-getting-started/end/vue-heroes/src/design/index.scss: -------------------------------------------------------------------------------- 1 | @import 'bulma'; 2 | @import 'variables'; 3 | @import 'styles'; 4 | -------------------------------------------------------------------------------- /02-getting-started/end/vue-heroes/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import App from '@/app'; 3 | 4 | Vue.config.productionTip = false; 5 | 6 | new Vue({ 7 | render: h => h(App), 8 | }).$mount('#app'); 9 | -------------------------------------------------------------------------------- /02-getting-started/end/vue-heroes/src/views/about.vue: -------------------------------------------------------------------------------- 1 | 24 | 25 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /02-getting-started/end/vue-heroes/vue.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | configureWebpack: { 3 | devtool: 'source-map', 4 | }, 5 | }; 6 | -------------------------------------------------------------------------------- /02-getting-started/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 |
7 | 8 |

Hello {{ name }}

9 |
10 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /03-data-and-events/begin/vue-heroes/.browserslistrc: -------------------------------------------------------------------------------- 1 | > 1% 2 | last 2 versions 3 | -------------------------------------------------------------------------------- /03-data-and-events/begin/vue-heroes/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { 4 | node: true, 5 | }, 6 | extends: ['plugin:vue/essential', '@vue/prettier'], 7 | plugins: ['prettier'], 8 | // watch this for explaining why some of this is here 9 | // https://www.youtube.com/watch?time_continue=239&v=YIvjKId9m2c 10 | rules: { 11 | 'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off', 12 | 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off', 13 | quotes: [2, 'single', { avoidEscape: true, allowTemplateLiterals: true }], 14 | 'prettier/prettier': [ 15 | 'error', 16 | { 17 | trailingComma: 'es5', 18 | singleQuote: true, 19 | printWidth: 80, 20 | }, 21 | ], 22 | 'vue/no-unused-components': [ 23 | 'error', 24 | { 25 | ignoreWhenBindingPresent: true, 26 | }, 27 | ], 28 | }, 29 | parserOptions: { 30 | parser: 'babel-eslint', 31 | }, 32 | }; 33 | -------------------------------------------------------------------------------- /03-data-and-events/begin/vue-heroes/.prettierrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | printWidth: 80, 3 | tabWidth: 2, 4 | bracketSpacing: true, 5 | singleQuote: true, 6 | trailingComma: 'all', 7 | }; 8 | -------------------------------------------------------------------------------- /03-data-and-events/begin/vue-heroes/.vscode/launch.json: -------------------------------------------------------------------------------- 1 | { 2 | // Use IntelliSense to learn about possible attributes. 3 | // Hover to view descriptions of existing attributes. 4 | // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 5 | "version": "0.2.0", 6 | "configurations": [ 7 | { 8 | "type": "chrome", 9 | "request": "launch", 10 | "name": "Vue: Chrome", 11 | "url": "http://localhost:9626", 12 | "webRoot": "${workspaceFolder}/src", 13 | "breakOnLoad": true, 14 | "sourceMapPathOverrides": { 15 | "webpack:///src/*": "${webRoot}/*", 16 | "webpack:///./src/*": "${webRoot}/*", 17 | "webpack:///./*": "${webRoot}/*", 18 | "webpack:///*": "*", 19 | "webpack:///./~/*": "${webRoot}/node_modules/*", 20 | "meteor://💻app/*": "${webRoot}/*" 21 | } 22 | } 23 | ] 24 | } -------------------------------------------------------------------------------- /03-data-and-events/begin/vue-heroes/.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "eslint.enable": true, 3 | "workbench.colorCustomizations": { 4 | "activityBar.background": "#65c89b", 5 | "activityBar.foreground": "#15202b", 6 | "activityBar.inactiveForeground": "#15202b99", 7 | "activityBarBadge.background": "#945bc4", 8 | "activityBarBadge.foreground": "#e7e7e7", 9 | "statusBar.background": "#42b883", 10 | "statusBarItem.hoverBackground": "#359268", 11 | "statusBar.foreground": "#15202b" 12 | } 13 | } -------------------------------------------------------------------------------- /03-data-and-events/begin/vue-heroes/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: ['@vue/app'], 3 | }; 4 | -------------------------------------------------------------------------------- /03-data-and-events/begin/vue-heroes/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-heroes", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "serve": "vue-cli-service serve", 7 | "build": "vue-cli-service build", 8 | "lint": "vue-cli-service lint" 9 | }, 10 | "dependencies": { 11 | "core-js": "^2.6.5", 12 | "vue": "^2.6.10", 13 | "@fortawesome/fontawesome-svg-core": "^1.2.18", 14 | "@fortawesome/free-solid-svg-icons": "^5.8.2", 15 | "@fortawesome/vue-fontawesome": "^0.1.6", 16 | "bulma": "^0.7.5" 17 | }, 18 | "devDependencies": { 19 | "@vue/cli-plugin-babel": "^3.7.0", 20 | "@vue/cli-plugin-eslint": "^3.7.0", 21 | "@vue/cli-service": "^3.7.0", 22 | "@vue/eslint-config-prettier": "^4.0.1", 23 | "babel-eslint": "^10.0.1", 24 | "eslint": "^5.16.0", 25 | "eslint-plugin-vue": "^5.0.0", 26 | "node-sass": "^4.9.0", 27 | "sass-loader": "^7.1.0", 28 | "vue-template-compiler": "^2.5.21" 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /03-data-and-events/begin/vue-heroes/postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | autoprefixer: {}, 4 | }, 5 | }; 6 | -------------------------------------------------------------------------------- /03-data-and-events/begin/vue-heroes/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/johnpapa/vue-getting-started/2d37324d92c101d17291de37ae7575184790ef4c/03-data-and-events/begin/vue-heroes/public/favicon.ico -------------------------------------------------------------------------------- /03-data-and-events/begin/vue-heroes/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 14 | Vue Heroes 15 | 16 | 17 | 23 |
24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /03-data-and-events/begin/vue-heroes/src/app.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 21 | 22 | 25 | -------------------------------------------------------------------------------- /03-data-and-events/begin/vue-heroes/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/johnpapa/vue-getting-started/2d37324d92c101d17291de37ae7575184790ef4c/03-data-and-events/begin/vue-heroes/src/assets/logo.png -------------------------------------------------------------------------------- /03-data-and-events/begin/vue-heroes/src/components/header-bar-brand.vue: -------------------------------------------------------------------------------- 1 | 28 | -------------------------------------------------------------------------------- /03-data-and-events/begin/vue-heroes/src/components/header-bar-links.vue: -------------------------------------------------------------------------------- 1 | 25 | -------------------------------------------------------------------------------- /03-data-and-events/begin/vue-heroes/src/components/header-bar.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 23 | -------------------------------------------------------------------------------- /03-data-and-events/begin/vue-heroes/src/design/_variables.scss: -------------------------------------------------------------------------------- 1 | $vue: #42b883; 2 | $vue-light: #42b883; 3 | $primary: $vue; 4 | $primary-light: $vue-light; 5 | $link: $primary; 6 | $info: $primary; 7 | $shade-light: #fafafa; 8 | -------------------------------------------------------------------------------- /03-data-and-events/begin/vue-heroes/src/design/index.scss: -------------------------------------------------------------------------------- 1 | @import 'bulma'; 2 | @import 'variables'; 3 | @import 'styles'; 4 | -------------------------------------------------------------------------------- /03-data-and-events/begin/vue-heroes/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import App from '@/app'; 3 | 4 | Vue.config.productionTip = false; 5 | 6 | new Vue({ 7 | render: h => h(App), 8 | }).$mount('#app'); 9 | -------------------------------------------------------------------------------- /03-data-and-events/begin/vue-heroes/src/views/about.vue: -------------------------------------------------------------------------------- 1 | 24 | 25 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /03-data-and-events/begin/vue-heroes/vue.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | configureWebpack: { 3 | devtool: 'source-map', 4 | }, 5 | }; 6 | -------------------------------------------------------------------------------- /03-data-and-events/end/vue-heroes/.browserslistrc: -------------------------------------------------------------------------------- 1 | > 1% 2 | last 2 versions 3 | -------------------------------------------------------------------------------- /03-data-and-events/end/vue-heroes/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { 4 | node: true, 5 | }, 6 | extends: ['plugin:vue/essential', '@vue/prettier'], 7 | plugins: ['prettier'], 8 | // watch this for explaining why some of this is here 9 | // https://www.youtube.com/watch?time_continue=239&v=YIvjKId9m2c 10 | rules: { 11 | 'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off', 12 | 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off', 13 | quotes: [2, 'single', { avoidEscape: true, allowTemplateLiterals: true }], 14 | 'prettier/prettier': [ 15 | 'error', 16 | { 17 | trailingComma: 'es5', 18 | singleQuote: true, 19 | printWidth: 80, 20 | }, 21 | ], 22 | 'vue/no-unused-components': [ 23 | 'error', 24 | { 25 | ignoreWhenBindingPresent: true, 26 | }, 27 | ], 28 | }, 29 | parserOptions: { 30 | parser: 'babel-eslint', 31 | }, 32 | }; 33 | -------------------------------------------------------------------------------- /03-data-and-events/end/vue-heroes/.prettierrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | printWidth: 80, 3 | tabWidth: 2, 4 | bracketSpacing: true, 5 | singleQuote: true, 6 | trailingComma: 'all', 7 | }; 8 | -------------------------------------------------------------------------------- /03-data-and-events/end/vue-heroes/.vscode/launch.json: -------------------------------------------------------------------------------- 1 | { 2 | // Use IntelliSense to learn about possible attributes. 3 | // Hover to view descriptions of existing attributes. 4 | // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 5 | "version": "0.2.0", 6 | "configurations": [ 7 | { 8 | "type": "chrome", 9 | "request": "launch", 10 | "name": "Vue: Chrome", 11 | "url": "http://localhost:9626", 12 | "webRoot": "${workspaceFolder}/src", 13 | "breakOnLoad": true, 14 | "sourceMapPathOverrides": { 15 | "webpack:///src/*": "${webRoot}/*", 16 | "webpack:///./src/*": "${webRoot}/*", 17 | "webpack:///./*": "${webRoot}/*", 18 | "webpack:///*": "*", 19 | "webpack:///./~/*": "${webRoot}/node_modules/*", 20 | "meteor://💻app/*": "${webRoot}/*" 21 | } 22 | } 23 | ] 24 | } -------------------------------------------------------------------------------- /03-data-and-events/end/vue-heroes/.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "eslint.enable": true, 3 | "workbench.colorCustomizations": { 4 | "activityBar.background": "#65c89b", 5 | "activityBar.foreground": "#15202b", 6 | "activityBar.inactiveForeground": "#15202b99", 7 | "activityBarBadge.background": "#945bc4", 8 | "activityBarBadge.foreground": "#e7e7e7", 9 | "statusBar.background": "#42b883", 10 | "statusBarItem.hoverBackground": "#359268", 11 | "statusBar.foreground": "#15202b" 12 | } 13 | } -------------------------------------------------------------------------------- /03-data-and-events/end/vue-heroes/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: ['@vue/app'], 3 | }; 4 | -------------------------------------------------------------------------------- /03-data-and-events/end/vue-heroes/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-heroes", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "serve": "vue-cli-service serve", 7 | "build": "vue-cli-service build", 8 | "lint": "vue-cli-service lint" 9 | }, 10 | "dependencies": { 11 | "core-js": "^2.6.5", 12 | "vue": "^2.6.10", 13 | "@fortawesome/fontawesome-svg-core": "^1.2.18", 14 | "@fortawesome/free-solid-svg-icons": "^5.8.2", 15 | "@fortawesome/vue-fontawesome": "^0.1.6", 16 | "bulma": "^0.7.5" 17 | }, 18 | "devDependencies": { 19 | "@vue/cli-plugin-babel": "^3.7.0", 20 | "@vue/cli-plugin-eslint": "^3.7.0", 21 | "@vue/cli-service": "^3.7.0", 22 | "@vue/eslint-config-prettier": "^4.0.1", 23 | "babel-eslint": "^10.0.1", 24 | "eslint": "^5.16.0", 25 | "eslint-plugin-vue": "^5.0.0", 26 | "node-sass": "^4.9.0", 27 | "sass-loader": "^7.1.0", 28 | "vue-template-compiler": "^2.5.21" 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /03-data-and-events/end/vue-heroes/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/johnpapa/vue-getting-started/2d37324d92c101d17291de37ae7575184790ef4c/03-data-and-events/end/vue-heroes/public/favicon.ico -------------------------------------------------------------------------------- /03-data-and-events/end/vue-heroes/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 14 | Vue Heroes 15 | 16 | 17 | 23 |
24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /03-data-and-events/end/vue-heroes/src/app.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 21 | 22 | 25 | -------------------------------------------------------------------------------- /03-data-and-events/end/vue-heroes/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/johnpapa/vue-getting-started/2d37324d92c101d17291de37ae7575184790ef4c/03-data-and-events/end/vue-heroes/src/assets/logo.png -------------------------------------------------------------------------------- /03-data-and-events/end/vue-heroes/src/components/header-bar-brand.vue: -------------------------------------------------------------------------------- 1 | 28 | -------------------------------------------------------------------------------- /03-data-and-events/end/vue-heroes/src/components/header-bar-links.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | 28 | -------------------------------------------------------------------------------- /03-data-and-events/end/vue-heroes/src/components/header-bar.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 23 | -------------------------------------------------------------------------------- /03-data-and-events/end/vue-heroes/src/design/_variables.scss: -------------------------------------------------------------------------------- 1 | $vue: #42b883; 2 | $vue-light: #42b883; 3 | $primary: $vue; 4 | $primary-light: $vue-light; 5 | $link: $primary; 6 | $info: $primary; 7 | $shade-light: #fafafa; 8 | -------------------------------------------------------------------------------- /03-data-and-events/end/vue-heroes/src/design/index.scss: -------------------------------------------------------------------------------- 1 | @import 'bulma'; 2 | @import 'variables'; 3 | @import 'styles'; 4 | -------------------------------------------------------------------------------- /03-data-and-events/end/vue-heroes/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import App from '@/app'; 3 | 4 | Vue.config.productionTip = false; 5 | 6 | new Vue({ 7 | render: h => h(App), 8 | }).$mount('#app'); 9 | -------------------------------------------------------------------------------- /03-data-and-events/end/vue-heroes/src/views/about.vue: -------------------------------------------------------------------------------- 1 | 24 | 25 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /03-data-and-events/end/vue-heroes/vue.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | configureWebpack: { 3 | devtool: 'source-map', 4 | }, 5 | }; 6 | -------------------------------------------------------------------------------- /04-lists-and-conditionals/begin/vue-heroes/.browserslistrc: -------------------------------------------------------------------------------- 1 | > 1% 2 | last 2 versions 3 | -------------------------------------------------------------------------------- /04-lists-and-conditionals/begin/vue-heroes/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { 4 | node: true, 5 | }, 6 | extends: ['plugin:vue/essential', '@vue/prettier'], 7 | plugins: ['prettier'], 8 | // watch this for explaining why some of this is here 9 | // https://www.youtube.com/watch?time_continue=239&v=YIvjKId9m2c 10 | rules: { 11 | 'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off', 12 | 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off', 13 | quotes: [2, 'single', { avoidEscape: true, allowTemplateLiterals: true }], 14 | 'prettier/prettier': [ 15 | 'error', 16 | { 17 | trailingComma: 'es5', 18 | singleQuote: true, 19 | printWidth: 80, 20 | }, 21 | ], 22 | 'vue/no-unused-components': [ 23 | 'error', 24 | { 25 | ignoreWhenBindingPresent: true, 26 | }, 27 | ], 28 | }, 29 | parserOptions: { 30 | parser: 'babel-eslint', 31 | }, 32 | }; 33 | -------------------------------------------------------------------------------- /04-lists-and-conditionals/begin/vue-heroes/.prettierrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | printWidth: 80, 3 | tabWidth: 2, 4 | bracketSpacing: true, 5 | singleQuote: true, 6 | trailingComma: 'all', 7 | }; 8 | -------------------------------------------------------------------------------- /04-lists-and-conditionals/begin/vue-heroes/.vscode/launch.json: -------------------------------------------------------------------------------- 1 | { 2 | // Use IntelliSense to learn about possible attributes. 3 | // Hover to view descriptions of existing attributes. 4 | // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 5 | "version": "0.2.0", 6 | "configurations": [ 7 | { 8 | "type": "chrome", 9 | "request": "launch", 10 | "name": "Vue: Chrome", 11 | "url": "http://localhost:9626", 12 | "webRoot": "${workspaceFolder}/src", 13 | "breakOnLoad": true, 14 | "sourceMapPathOverrides": { 15 | "webpack:///src/*": "${webRoot}/*", 16 | "webpack:///./src/*": "${webRoot}/*", 17 | "webpack:///./*": "${webRoot}/*", 18 | "webpack:///*": "*", 19 | "webpack:///./~/*": "${webRoot}/node_modules/*", 20 | "meteor://💻app/*": "${webRoot}/*" 21 | } 22 | } 23 | ] 24 | } -------------------------------------------------------------------------------- /04-lists-and-conditionals/begin/vue-heroes/.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "eslint.enable": true, 3 | "workbench.colorCustomizations": { 4 | "activityBar.background": "#65c89b", 5 | "activityBar.foreground": "#15202b", 6 | "activityBar.inactiveForeground": "#15202b99", 7 | "activityBarBadge.background": "#945bc4", 8 | "activityBarBadge.foreground": "#e7e7e7", 9 | "statusBar.background": "#42b883", 10 | "statusBarItem.hoverBackground": "#359268", 11 | "statusBar.foreground": "#15202b" 12 | } 13 | } -------------------------------------------------------------------------------- /04-lists-and-conditionals/begin/vue-heroes/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: ['@vue/app'], 3 | }; 4 | -------------------------------------------------------------------------------- /04-lists-and-conditionals/begin/vue-heroes/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-heroes", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "serve": "vue-cli-service serve", 7 | "build": "vue-cli-service build", 8 | "lint": "vue-cli-service lint" 9 | }, 10 | "dependencies": { 11 | "core-js": "^2.6.5", 12 | "vue": "^2.6.10", 13 | "@fortawesome/fontawesome-svg-core": "^1.2.18", 14 | "@fortawesome/free-solid-svg-icons": "^5.8.2", 15 | "@fortawesome/vue-fontawesome": "^0.1.6", 16 | "bulma": "^0.7.5" 17 | }, 18 | "devDependencies": { 19 | "@vue/cli-plugin-babel": "^3.7.0", 20 | "@vue/cli-plugin-eslint": "^3.7.0", 21 | "@vue/cli-service": "^3.7.0", 22 | "@vue/eslint-config-prettier": "^4.0.1", 23 | "babel-eslint": "^10.0.1", 24 | "eslint": "^5.16.0", 25 | "eslint-plugin-vue": "^5.0.0", 26 | "node-sass": "^4.9.0", 27 | "sass-loader": "^7.1.0", 28 | "vue-template-compiler": "^2.5.21" 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /04-lists-and-conditionals/begin/vue-heroes/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/johnpapa/vue-getting-started/2d37324d92c101d17291de37ae7575184790ef4c/04-lists-and-conditionals/begin/vue-heroes/public/favicon.ico -------------------------------------------------------------------------------- /04-lists-and-conditionals/begin/vue-heroes/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 14 | Vue Heroes 15 | 16 | 17 | 23 |
24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /04-lists-and-conditionals/begin/vue-heroes/src/app.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 21 | 22 | 25 | -------------------------------------------------------------------------------- /04-lists-and-conditionals/begin/vue-heroes/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/johnpapa/vue-getting-started/2d37324d92c101d17291de37ae7575184790ef4c/04-lists-and-conditionals/begin/vue-heroes/src/assets/logo.png -------------------------------------------------------------------------------- /04-lists-and-conditionals/begin/vue-heroes/src/components/header-bar-brand.vue: -------------------------------------------------------------------------------- 1 | 28 | -------------------------------------------------------------------------------- /04-lists-and-conditionals/begin/vue-heroes/src/components/header-bar-links.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | 28 | -------------------------------------------------------------------------------- /04-lists-and-conditionals/begin/vue-heroes/src/components/header-bar.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 23 | -------------------------------------------------------------------------------- /04-lists-and-conditionals/begin/vue-heroes/src/design/_variables.scss: -------------------------------------------------------------------------------- 1 | $vue: #42b883; 2 | $vue-light: #42b883; 3 | $primary: $vue; 4 | $primary-light: $vue-light; 5 | $link: $primary; 6 | $info: $primary; 7 | $shade-light: #fafafa; 8 | $accent-color: #00b3e6; -------------------------------------------------------------------------------- /04-lists-and-conditionals/begin/vue-heroes/src/design/index.scss: -------------------------------------------------------------------------------- 1 | @import 'bulma'; 2 | @import 'variables'; 3 | @import 'styles'; 4 | -------------------------------------------------------------------------------- /04-lists-and-conditionals/begin/vue-heroes/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import App from '@/app'; 3 | 4 | Vue.config.productionTip = false; 5 | 6 | new Vue({ 7 | render: h => h(App), 8 | }).$mount('#app'); 9 | -------------------------------------------------------------------------------- /04-lists-and-conditionals/begin/vue-heroes/src/views/about.vue: -------------------------------------------------------------------------------- 1 | 24 | 25 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /04-lists-and-conditionals/begin/vue-heroes/vue.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | configureWebpack: { 3 | devtool: 'source-map', 4 | }, 5 | }; 6 | -------------------------------------------------------------------------------- /04-lists-and-conditionals/end/vue-heroes/.browserslistrc: -------------------------------------------------------------------------------- 1 | > 1% 2 | last 2 versions 3 | -------------------------------------------------------------------------------- /04-lists-and-conditionals/end/vue-heroes/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { 4 | node: true, 5 | }, 6 | extends: ['plugin:vue/essential', '@vue/prettier'], 7 | plugins: ['prettier'], 8 | // watch this for explaining why some of this is here 9 | // https://www.youtube.com/watch?time_continue=239&v=YIvjKId9m2c 10 | rules: { 11 | 'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off', 12 | 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off', 13 | quotes: [2, 'single', { avoidEscape: true, allowTemplateLiterals: true }], 14 | 'prettier/prettier': [ 15 | 'error', 16 | { 17 | trailingComma: 'es5', 18 | singleQuote: true, 19 | printWidth: 80, 20 | }, 21 | ], 22 | 'vue/no-unused-components': [ 23 | 'error', 24 | { 25 | ignoreWhenBindingPresent: true, 26 | }, 27 | ], 28 | }, 29 | parserOptions: { 30 | parser: 'babel-eslint', 31 | }, 32 | }; 33 | -------------------------------------------------------------------------------- /04-lists-and-conditionals/end/vue-heroes/.prettierrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | printWidth: 80, 3 | tabWidth: 2, 4 | bracketSpacing: true, 5 | singleQuote: true, 6 | trailingComma: 'all', 7 | }; 8 | -------------------------------------------------------------------------------- /04-lists-and-conditionals/end/vue-heroes/.vscode/launch.json: -------------------------------------------------------------------------------- 1 | { 2 | // Use IntelliSense to learn about possible attributes. 3 | // Hover to view descriptions of existing attributes. 4 | // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 5 | "version": "0.2.0", 6 | "configurations": [ 7 | { 8 | "type": "chrome", 9 | "request": "launch", 10 | "name": "Vue: Chrome", 11 | "url": "http://localhost:9626", 12 | "webRoot": "${workspaceFolder}/src", 13 | "breakOnLoad": true, 14 | "sourceMapPathOverrides": { 15 | "webpack:///src/*": "${webRoot}/*", 16 | "webpack:///./src/*": "${webRoot}/*", 17 | "webpack:///./*": "${webRoot}/*", 18 | "webpack:///*": "*", 19 | "webpack:///./~/*": "${webRoot}/node_modules/*", 20 | "meteor://💻app/*": "${webRoot}/*" 21 | } 22 | } 23 | ] 24 | } -------------------------------------------------------------------------------- /04-lists-and-conditionals/end/vue-heroes/.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "eslint.enable": true, 3 | "workbench.colorCustomizations": { 4 | "activityBar.background": "#65c89b", 5 | "activityBar.foreground": "#15202b", 6 | "activityBar.inactiveForeground": "#15202b99", 7 | "activityBarBadge.background": "#945bc4", 8 | "activityBarBadge.foreground": "#e7e7e7", 9 | "statusBar.background": "#42b883", 10 | "statusBarItem.hoverBackground": "#359268", 11 | "statusBar.foreground": "#15202b" 12 | } 13 | } -------------------------------------------------------------------------------- /04-lists-and-conditionals/end/vue-heroes/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: ['@vue/app'], 3 | }; 4 | -------------------------------------------------------------------------------- /04-lists-and-conditionals/end/vue-heroes/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-heroes", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "serve": "vue-cli-service serve", 7 | "build": "vue-cli-service build", 8 | "lint": "vue-cli-service lint" 9 | }, 10 | "dependencies": { 11 | "core-js": "^2.6.5", 12 | "vue": "^2.6.10", 13 | "@fortawesome/fontawesome-svg-core": "^1.2.18", 14 | "@fortawesome/free-solid-svg-icons": "^5.8.2", 15 | "@fortawesome/vue-fontawesome": "^0.1.6", 16 | "bulma": "^0.7.5" 17 | }, 18 | "devDependencies": { 19 | "@vue/cli-plugin-babel": "^3.7.0", 20 | "@vue/cli-plugin-eslint": "^3.7.0", 21 | "@vue/cli-service": "^3.7.0", 22 | "@vue/eslint-config-prettier": "^4.0.1", 23 | "babel-eslint": "^10.0.1", 24 | "eslint": "^5.16.0", 25 | "eslint-plugin-vue": "^5.0.0", 26 | "node-sass": "^4.9.0", 27 | "sass-loader": "^7.1.0", 28 | "vue-template-compiler": "^2.5.21" 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /04-lists-and-conditionals/end/vue-heroes/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/johnpapa/vue-getting-started/2d37324d92c101d17291de37ae7575184790ef4c/04-lists-and-conditionals/end/vue-heroes/public/favicon.ico -------------------------------------------------------------------------------- /04-lists-and-conditionals/end/vue-heroes/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 14 | Vue Heroes 15 | 16 | 17 | 23 |
24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /04-lists-and-conditionals/end/vue-heroes/src/app.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 21 | 22 | 25 | -------------------------------------------------------------------------------- /04-lists-and-conditionals/end/vue-heroes/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/johnpapa/vue-getting-started/2d37324d92c101d17291de37ae7575184790ef4c/04-lists-and-conditionals/end/vue-heroes/src/assets/logo.png -------------------------------------------------------------------------------- /04-lists-and-conditionals/end/vue-heroes/src/components/header-bar-brand.vue: -------------------------------------------------------------------------------- 1 | 28 | -------------------------------------------------------------------------------- /04-lists-and-conditionals/end/vue-heroes/src/components/header-bar-links.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | 28 | -------------------------------------------------------------------------------- /04-lists-and-conditionals/end/vue-heroes/src/components/header-bar.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 23 | -------------------------------------------------------------------------------- /04-lists-and-conditionals/end/vue-heroes/src/design/_variables.scss: -------------------------------------------------------------------------------- 1 | $vue: #42b883; 2 | $vue-light: #42b883; 3 | $primary: $vue; 4 | $primary-light: $vue-light; 5 | $link: $primary; 6 | $info: $primary; 7 | $shade-light: #fafafa; 8 | $accent-color: #00b3e6; -------------------------------------------------------------------------------- /04-lists-and-conditionals/end/vue-heroes/src/design/index.scss: -------------------------------------------------------------------------------- 1 | @import 'bulma'; 2 | @import 'variables'; 3 | @import 'styles'; 4 | -------------------------------------------------------------------------------- /04-lists-and-conditionals/end/vue-heroes/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import App from '@/app'; 3 | 4 | Vue.config.productionTip = false; 5 | 6 | new Vue({ 7 | render: h => h(App), 8 | }).$mount('#app'); 9 | -------------------------------------------------------------------------------- /04-lists-and-conditionals/end/vue-heroes/src/views/about.vue: -------------------------------------------------------------------------------- 1 | 24 | 25 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /04-lists-and-conditionals/end/vue-heroes/vue.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | configureWebpack: { 3 | devtool: 'source-map', 4 | }, 5 | }; 6 | -------------------------------------------------------------------------------- /05-interacting-within-a-component/begin/vue-heroes/.browserslistrc: -------------------------------------------------------------------------------- 1 | > 1% 2 | last 2 versions 3 | -------------------------------------------------------------------------------- /05-interacting-within-a-component/begin/vue-heroes/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { 4 | node: true, 5 | }, 6 | extends: ['plugin:vue/essential', '@vue/prettier'], 7 | plugins: ['prettier'], 8 | // watch this for explaining why some of this is here 9 | // https://www.youtube.com/watch?time_continue=239&v=YIvjKId9m2c 10 | rules: { 11 | 'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off', 12 | 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off', 13 | quotes: [2, 'single', { avoidEscape: true, allowTemplateLiterals: true }], 14 | 'prettier/prettier': [ 15 | 'error', 16 | { 17 | trailingComma: 'es5', 18 | singleQuote: true, 19 | printWidth: 80, 20 | }, 21 | ], 22 | 'vue/no-unused-components': [ 23 | 'error', 24 | { 25 | ignoreWhenBindingPresent: true, 26 | }, 27 | ], 28 | }, 29 | parserOptions: { 30 | parser: 'babel-eslint', 31 | }, 32 | }; 33 | -------------------------------------------------------------------------------- /05-interacting-within-a-component/begin/vue-heroes/.prettierrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | printWidth: 80, 3 | tabWidth: 2, 4 | bracketSpacing: true, 5 | singleQuote: true, 6 | trailingComma: 'all', 7 | }; 8 | -------------------------------------------------------------------------------- /05-interacting-within-a-component/begin/vue-heroes/.vscode/launch.json: -------------------------------------------------------------------------------- 1 | { 2 | // Use IntelliSense to learn about possible attributes. 3 | // Hover to view descriptions of existing attributes. 4 | // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 5 | "version": "0.2.0", 6 | "configurations": [ 7 | { 8 | "type": "chrome", 9 | "request": "launch", 10 | "name": "Vue: Chrome", 11 | "url": "http://localhost:9626", 12 | "webRoot": "${workspaceFolder}/src", 13 | "breakOnLoad": true, 14 | "sourceMapPathOverrides": { 15 | "webpack:///src/*": "${webRoot}/*", 16 | "webpack:///./src/*": "${webRoot}/*", 17 | "webpack:///./*": "${webRoot}/*", 18 | "webpack:///*": "*", 19 | "webpack:///./~/*": "${webRoot}/node_modules/*", 20 | "meteor://💻app/*": "${webRoot}/*" 21 | } 22 | } 23 | ] 24 | } -------------------------------------------------------------------------------- /05-interacting-within-a-component/begin/vue-heroes/.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "eslint.enable": true, 3 | "workbench.colorCustomizations": { 4 | "activityBar.background": "#65c89b", 5 | "activityBar.foreground": "#15202b", 6 | "activityBar.inactiveForeground": "#15202b99", 7 | "activityBarBadge.background": "#945bc4", 8 | "activityBarBadge.foreground": "#e7e7e7", 9 | "statusBar.background": "#42b883", 10 | "statusBarItem.hoverBackground": "#359268", 11 | "statusBar.foreground": "#15202b" 12 | } 13 | } -------------------------------------------------------------------------------- /05-interacting-within-a-component/begin/vue-heroes/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: ['@vue/app'], 3 | }; 4 | -------------------------------------------------------------------------------- /05-interacting-within-a-component/begin/vue-heroes/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-heroes", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "serve": "vue-cli-service serve", 7 | "build": "vue-cli-service build", 8 | "lint": "vue-cli-service lint" 9 | }, 10 | "dependencies": { 11 | "@fortawesome/fontawesome-svg-core": "^1.2.18", 12 | "@fortawesome/free-solid-svg-icons": "^5.8.2", 13 | "@fortawesome/vue-fontawesome": "^0.1.6", 14 | "bulma": "^0.7.5", 15 | "core-js": "^2.6.5", 16 | "date-fns": "^1.30.1", 17 | "vue": "^2.6.10" 18 | }, 19 | "devDependencies": { 20 | "@vue/cli-plugin-babel": "^3.7.0", 21 | "@vue/cli-plugin-eslint": "^3.7.0", 22 | "@vue/cli-service": "^3.7.0", 23 | "@vue/eslint-config-prettier": "^4.0.1", 24 | "babel-eslint": "^10.0.1", 25 | "eslint": "^5.16.0", 26 | "eslint-plugin-vue": "^5.0.0", 27 | "node-sass": "^4.9.0", 28 | "sass-loader": "^7.1.0", 29 | "vue-template-compiler": "^2.5.21" 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /05-interacting-within-a-component/begin/vue-heroes/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/johnpapa/vue-getting-started/2d37324d92c101d17291de37ae7575184790ef4c/05-interacting-within-a-component/begin/vue-heroes/public/favicon.ico -------------------------------------------------------------------------------- /05-interacting-within-a-component/begin/vue-heroes/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 14 | Vue Heroes 15 | 16 | 17 | 23 |
24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /05-interacting-within-a-component/begin/vue-heroes/src/app.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 21 | 22 | 25 | -------------------------------------------------------------------------------- /05-interacting-within-a-component/begin/vue-heroes/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/johnpapa/vue-getting-started/2d37324d92c101d17291de37ae7575184790ef4c/05-interacting-within-a-component/begin/vue-heroes/src/assets/logo.png -------------------------------------------------------------------------------- /05-interacting-within-a-component/begin/vue-heroes/src/components/header-bar-brand.vue: -------------------------------------------------------------------------------- 1 | 28 | -------------------------------------------------------------------------------- /05-interacting-within-a-component/begin/vue-heroes/src/components/header-bar-links.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | 28 | -------------------------------------------------------------------------------- /05-interacting-within-a-component/begin/vue-heroes/src/components/header-bar.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 23 | -------------------------------------------------------------------------------- /05-interacting-within-a-component/begin/vue-heroes/src/design/_variables.scss: -------------------------------------------------------------------------------- 1 | $vue: #42b883; 2 | $vue-light: #42b883; 3 | $primary: $vue; 4 | $primary-light: $vue-light; 5 | $link: $primary; 6 | $info: $primary; 7 | $shade-light: #fafafa; 8 | $accent-color: #00b3e6; -------------------------------------------------------------------------------- /05-interacting-within-a-component/begin/vue-heroes/src/design/index.scss: -------------------------------------------------------------------------------- 1 | @import 'bulma'; 2 | @import 'variables'; 3 | @import 'styles'; 4 | -------------------------------------------------------------------------------- /05-interacting-within-a-component/begin/vue-heroes/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import App from '@/app'; 3 | 4 | Vue.config.productionTip = false; 5 | 6 | new Vue({ 7 | render: h => h(App), 8 | }).$mount('#app'); 9 | -------------------------------------------------------------------------------- /05-interacting-within-a-component/begin/vue-heroes/src/views/about.vue: -------------------------------------------------------------------------------- 1 | 24 | 25 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /05-interacting-within-a-component/begin/vue-heroes/vue.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | configureWebpack: { 3 | devtool: 'source-map', 4 | }, 5 | }; 6 | -------------------------------------------------------------------------------- /05-interacting-within-a-component/end/vue-heroes/.browserslistrc: -------------------------------------------------------------------------------- 1 | > 1% 2 | last 2 versions 3 | -------------------------------------------------------------------------------- /05-interacting-within-a-component/end/vue-heroes/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { 4 | node: true, 5 | }, 6 | extends: ['plugin:vue/essential', '@vue/prettier'], 7 | plugins: ['prettier'], 8 | // watch this for explaining why some of this is here 9 | // https://www.youtube.com/watch?time_continue=239&v=YIvjKId9m2c 10 | rules: { 11 | 'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off', 12 | 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off', 13 | quotes: [2, 'single', { avoidEscape: true, allowTemplateLiterals: true }], 14 | 'prettier/prettier': [ 15 | 'error', 16 | { 17 | trailingComma: 'es5', 18 | singleQuote: true, 19 | printWidth: 80, 20 | }, 21 | ], 22 | 'vue/no-unused-components': [ 23 | 'error', 24 | { 25 | ignoreWhenBindingPresent: true, 26 | }, 27 | ], 28 | }, 29 | parserOptions: { 30 | parser: 'babel-eslint', 31 | }, 32 | }; 33 | -------------------------------------------------------------------------------- /05-interacting-within-a-component/end/vue-heroes/.prettierrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | printWidth: 80, 3 | tabWidth: 2, 4 | bracketSpacing: true, 5 | singleQuote: true, 6 | trailingComma: 'all', 7 | }; 8 | -------------------------------------------------------------------------------- /05-interacting-within-a-component/end/vue-heroes/.vscode/launch.json: -------------------------------------------------------------------------------- 1 | { 2 | // Use IntelliSense to learn about possible attributes. 3 | // Hover to view descriptions of existing attributes. 4 | // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 5 | "version": "0.2.0", 6 | "configurations": [ 7 | { 8 | "type": "chrome", 9 | "request": "launch", 10 | "name": "Vue: Chrome", 11 | "url": "http://localhost:9626", 12 | "webRoot": "${workspaceFolder}/src", 13 | "breakOnLoad": true, 14 | "sourceMapPathOverrides": { 15 | "webpack:///src/*": "${webRoot}/*", 16 | "webpack:///./src/*": "${webRoot}/*", 17 | "webpack:///./*": "${webRoot}/*", 18 | "webpack:///*": "*", 19 | "webpack:///./~/*": "${webRoot}/node_modules/*", 20 | "meteor://💻app/*": "${webRoot}/*" 21 | } 22 | } 23 | ] 24 | } -------------------------------------------------------------------------------- /05-interacting-within-a-component/end/vue-heroes/.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "eslint.enable": true, 3 | "workbench.colorCustomizations": { 4 | "activityBar.background": "#65c89b", 5 | "activityBar.foreground": "#15202b", 6 | "activityBar.inactiveForeground": "#15202b99", 7 | "activityBarBadge.background": "#945bc4", 8 | "activityBarBadge.foreground": "#e7e7e7", 9 | "statusBar.background": "#42b883", 10 | "statusBarItem.hoverBackground": "#359268", 11 | "statusBar.foreground": "#15202b" 12 | } 13 | } -------------------------------------------------------------------------------- /05-interacting-within-a-component/end/vue-heroes/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: ['@vue/app'], 3 | }; 4 | -------------------------------------------------------------------------------- /05-interacting-within-a-component/end/vue-heroes/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-heroes", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "serve": "vue-cli-service serve", 7 | "build": "vue-cli-service build", 8 | "lint": "vue-cli-service lint" 9 | }, 10 | "dependencies": { 11 | "@fortawesome/fontawesome-svg-core": "^1.2.18", 12 | "@fortawesome/free-solid-svg-icons": "^5.8.2", 13 | "@fortawesome/vue-fontawesome": "^0.1.6", 14 | "bulma": "^0.7.5", 15 | "core-js": "^2.6.5", 16 | "date-fns": "^1.30.1", 17 | "vue": "^2.6.10" 18 | }, 19 | "devDependencies": { 20 | "@vue/cli-plugin-babel": "^3.7.0", 21 | "@vue/cli-plugin-eslint": "^3.7.0", 22 | "@vue/cli-service": "^3.7.0", 23 | "@vue/eslint-config-prettier": "^4.0.1", 24 | "babel-eslint": "^10.0.1", 25 | "eslint": "^5.16.0", 26 | "eslint-plugin-vue": "^5.0.0", 27 | "node-sass": "^4.9.0", 28 | "sass-loader": "^7.1.0", 29 | "vue-template-compiler": "^2.5.21" 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /05-interacting-within-a-component/end/vue-heroes/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/johnpapa/vue-getting-started/2d37324d92c101d17291de37ae7575184790ef4c/05-interacting-within-a-component/end/vue-heroes/public/favicon.ico -------------------------------------------------------------------------------- /05-interacting-within-a-component/end/vue-heroes/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 14 | Vue Heroes 15 | 16 | 17 | 23 |
24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /05-interacting-within-a-component/end/vue-heroes/src/app.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 21 | 22 | 25 | -------------------------------------------------------------------------------- /05-interacting-within-a-component/end/vue-heroes/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/johnpapa/vue-getting-started/2d37324d92c101d17291de37ae7575184790ef4c/05-interacting-within-a-component/end/vue-heroes/src/assets/logo.png -------------------------------------------------------------------------------- /05-interacting-within-a-component/end/vue-heroes/src/components/header-bar-brand.vue: -------------------------------------------------------------------------------- 1 | 28 | -------------------------------------------------------------------------------- /05-interacting-within-a-component/end/vue-heroes/src/components/header-bar-links.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | 28 | -------------------------------------------------------------------------------- /05-interacting-within-a-component/end/vue-heroes/src/components/header-bar.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 23 | -------------------------------------------------------------------------------- /05-interacting-within-a-component/end/vue-heroes/src/design/_variables.scss: -------------------------------------------------------------------------------- 1 | $vue: #42b883; 2 | $vue-light: #42b883; 3 | $primary: $vue; 4 | $primary-light: $vue-light; 5 | $link: $primary; 6 | $info: $primary; 7 | $shade-light: #fafafa; 8 | $accent-color: #00b3e6; -------------------------------------------------------------------------------- /05-interacting-within-a-component/end/vue-heroes/src/design/index.scss: -------------------------------------------------------------------------------- 1 | @import 'bulma'; 2 | @import 'variables'; 3 | @import 'styles'; 4 | -------------------------------------------------------------------------------- /05-interacting-within-a-component/end/vue-heroes/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import App from '@/app'; 3 | 4 | Vue.config.productionTip = false; 5 | 6 | new Vue({ 7 | render: h => h(App), 8 | }).$mount('#app'); 9 | -------------------------------------------------------------------------------- /05-interacting-within-a-component/end/vue-heroes/src/views/about.vue: -------------------------------------------------------------------------------- 1 | 24 | 25 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /05-interacting-within-a-component/end/vue-heroes/vue.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | configureWebpack: { 3 | devtool: 'source-map', 4 | }, 5 | }; 6 | -------------------------------------------------------------------------------- /06-component-communication/begin/vue-heroes/.browserslistrc: -------------------------------------------------------------------------------- 1 | > 1% 2 | last 2 versions 3 | -------------------------------------------------------------------------------- /06-component-communication/begin/vue-heroes/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { 4 | node: true, 5 | }, 6 | extends: ['plugin:vue/essential', '@vue/prettier'], 7 | plugins: ['prettier'], 8 | // watch this for explaining why some of this is here 9 | // https://www.youtube.com/watch?time_continue=239&v=YIvjKId9m2c 10 | rules: { 11 | 'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off', 12 | 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off', 13 | quotes: [2, 'single', { avoidEscape: true, allowTemplateLiterals: true }], 14 | 'prettier/prettier': [ 15 | 'error', 16 | { 17 | trailingComma: 'es5', 18 | singleQuote: true, 19 | printWidth: 80, 20 | }, 21 | ], 22 | 'vue/no-unused-components': [ 23 | 'error', 24 | { 25 | ignoreWhenBindingPresent: true, 26 | }, 27 | ], 28 | }, 29 | parserOptions: { 30 | parser: 'babel-eslint', 31 | }, 32 | }; 33 | -------------------------------------------------------------------------------- /06-component-communication/begin/vue-heroes/.prettierrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | printWidth: 80, 3 | tabWidth: 2, 4 | bracketSpacing: true, 5 | singleQuote: true, 6 | trailingComma: 'all', 7 | }; 8 | -------------------------------------------------------------------------------- /06-component-communication/begin/vue-heroes/.vscode/launch.json: -------------------------------------------------------------------------------- 1 | { 2 | // Use IntelliSense to learn about possible attributes. 3 | // Hover to view descriptions of existing attributes. 4 | // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 5 | "version": "0.2.0", 6 | "configurations": [ 7 | { 8 | "type": "chrome", 9 | "request": "launch", 10 | "name": "Vue: Chrome", 11 | "url": "http://localhost:9626", 12 | "webRoot": "${workspaceFolder}/src", 13 | "breakOnLoad": true, 14 | "sourceMapPathOverrides": { 15 | "webpack:///src/*": "${webRoot}/*", 16 | "webpack:///./src/*": "${webRoot}/*", 17 | "webpack:///./*": "${webRoot}/*", 18 | "webpack:///*": "*", 19 | "webpack:///./~/*": "${webRoot}/node_modules/*", 20 | "meteor://💻app/*": "${webRoot}/*" 21 | } 22 | } 23 | ] 24 | } -------------------------------------------------------------------------------- /06-component-communication/begin/vue-heroes/.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "eslint.enable": true, 3 | "workbench.colorCustomizations": { 4 | "activityBar.background": "#65c89b", 5 | "activityBar.foreground": "#15202b", 6 | "activityBar.inactiveForeground": "#15202b99", 7 | "activityBarBadge.background": "#945bc4", 8 | "activityBarBadge.foreground": "#e7e7e7", 9 | "statusBar.background": "#42b883", 10 | "statusBarItem.hoverBackground": "#359268", 11 | "statusBar.foreground": "#15202b" 12 | } 13 | } -------------------------------------------------------------------------------- /06-component-communication/begin/vue-heroes/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: ['@vue/app'], 3 | }; 4 | -------------------------------------------------------------------------------- /06-component-communication/begin/vue-heroes/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-heroes", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "serve": "vue-cli-service serve", 7 | "build": "vue-cli-service build", 8 | "lint": "vue-cli-service lint" 9 | }, 10 | "dependencies": { 11 | "@fortawesome/fontawesome-svg-core": "^1.2.18", 12 | "@fortawesome/free-solid-svg-icons": "^5.8.2", 13 | "@fortawesome/vue-fontawesome": "^0.1.6", 14 | "bulma": "^0.7.5", 15 | "core-js": "^2.6.5", 16 | "date-fns": "^1.30.1", 17 | "vue": "^2.6.10" 18 | }, 19 | "devDependencies": { 20 | "@vue/cli-plugin-babel": "^3.7.0", 21 | "@vue/cli-plugin-eslint": "^3.7.0", 22 | "@vue/cli-service": "^3.7.0", 23 | "@vue/eslint-config-prettier": "^4.0.1", 24 | "babel-eslint": "^10.0.1", 25 | "eslint": "^5.16.0", 26 | "eslint-plugin-vue": "^5.0.0", 27 | "node-sass": "^4.9.0", 28 | "sass-loader": "^7.1.0", 29 | "vue-template-compiler": "^2.5.21" 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /06-component-communication/begin/vue-heroes/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/johnpapa/vue-getting-started/2d37324d92c101d17291de37ae7575184790ef4c/06-component-communication/begin/vue-heroes/public/favicon.ico -------------------------------------------------------------------------------- /06-component-communication/begin/vue-heroes/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 14 | Vue Heroes 15 | 16 | 17 | 23 |
24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /06-component-communication/begin/vue-heroes/src/app.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 21 | 22 | 25 | -------------------------------------------------------------------------------- /06-component-communication/begin/vue-heroes/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/johnpapa/vue-getting-started/2d37324d92c101d17291de37ae7575184790ef4c/06-component-communication/begin/vue-heroes/src/assets/logo.png -------------------------------------------------------------------------------- /06-component-communication/begin/vue-heroes/src/components/header-bar-brand.vue: -------------------------------------------------------------------------------- 1 | 28 | -------------------------------------------------------------------------------- /06-component-communication/begin/vue-heroes/src/components/header-bar-links.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | 28 | -------------------------------------------------------------------------------- /06-component-communication/begin/vue-heroes/src/components/header-bar.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 23 | -------------------------------------------------------------------------------- /06-component-communication/begin/vue-heroes/src/design/_variables.scss: -------------------------------------------------------------------------------- 1 | $vue: #42b883; 2 | $vue-light: #42b883; 3 | $primary: $vue; 4 | $primary-light: $vue-light; 5 | $link: $primary; 6 | $info: $primary; 7 | $shade-light: #fafafa; 8 | $accent-color: #00b3e6; -------------------------------------------------------------------------------- /06-component-communication/begin/vue-heroes/src/design/index.scss: -------------------------------------------------------------------------------- 1 | @import 'bulma'; 2 | @import 'variables'; 3 | @import 'styles'; 4 | -------------------------------------------------------------------------------- /06-component-communication/begin/vue-heroes/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import App from '@/app'; 3 | 4 | Vue.config.productionTip = false; 5 | 6 | new Vue({ 7 | render: h => h(App), 8 | }).$mount('#app'); 9 | -------------------------------------------------------------------------------- /06-component-communication/begin/vue-heroes/src/shared/constants.js: -------------------------------------------------------------------------------- 1 | export const inputDateFormat = 'YYYY-MM-DD'; 2 | export const displayDateFormat = 'MMM DD, YYYY'; 3 | export const displayTimeFormat = 'HH:mm:ss.SSS'; 4 | -------------------------------------------------------------------------------- /06-component-communication/begin/vue-heroes/src/shared/data.js: -------------------------------------------------------------------------------- 1 | import { format } from 'date-fns'; 2 | 3 | import { inputDateFormat } from './constants'; 4 | 5 | export const ourHeroes = [ 6 | { 7 | id: 10, 8 | firstName: 'Ella', 9 | lastName: 'Papa', 10 | capeCounter: 1, 11 | originDate: format(new Date(1996, 5, 1), inputDateFormat), 12 | description: 'fashionista', 13 | }, 14 | { 15 | id: 20, 16 | firstName: 'Madelyn', 17 | lastName: 'Papa', 18 | capeCounter: 3, 19 | originDate: format(new Date(1998, 7, 1), inputDateFormat), 20 | description: 'the cat whisperer', 21 | }, 22 | { 23 | id: 30, 24 | firstName: 'Haley', 25 | lastName: 'Papa', 26 | capeCounter: 2, 27 | originDate: format(new Date(1999, 8, 1), inputDateFormat), 28 | description: 'pen wielder', 29 | }, 30 | { 31 | id: 40, 32 | firstName: 'Landon', 33 | lastName: 'Papa', 34 | capeCounter: 0, 35 | originDate: format(new Date(2000, 9, 1), inputDateFormat), 36 | description: 'arc trooper', 37 | }, 38 | ]; 39 | -------------------------------------------------------------------------------- /06-component-communication/begin/vue-heroes/src/shared/index.js: -------------------------------------------------------------------------------- 1 | export * from './constants'; 2 | export * from './data'; 3 | export * from './logger'; 4 | export * from './logging-mixins'; 5 | -------------------------------------------------------------------------------- /06-component-communication/begin/vue-heroes/src/shared/logger.js: -------------------------------------------------------------------------------- 1 | import { format } from 'date-fns'; 2 | 3 | import { displayTimeFormat } from './constants'; 4 | 5 | export const logger = { 6 | info(message, data) { 7 | console.log(`Log ${format(Date.now(), displayTimeFormat)}: ${message}`); 8 | if (data) { 9 | console.log(JSON.stringify(data, null, 2)); 10 | } 11 | }, 12 | }; 13 | -------------------------------------------------------------------------------- /06-component-communication/begin/vue-heroes/src/views/about.vue: -------------------------------------------------------------------------------- 1 | 24 | 25 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /06-component-communication/begin/vue-heroes/vue.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | configureWebpack: { 3 | devtool: 'source-map', 4 | }, 5 | }; 6 | -------------------------------------------------------------------------------- /06-component-communication/end/vue-heroes/.browserslistrc: -------------------------------------------------------------------------------- 1 | > 1% 2 | last 2 versions 3 | -------------------------------------------------------------------------------- /06-component-communication/end/vue-heroes/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { 4 | node: true, 5 | }, 6 | extends: ['plugin:vue/essential', '@vue/prettier'], 7 | plugins: ['prettier'], 8 | // watch this for explaining why some of this is here 9 | // https://www.youtube.com/watch?time_continue=239&v=YIvjKId9m2c 10 | rules: { 11 | 'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off', 12 | 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off', 13 | quotes: [2, 'single', { avoidEscape: true, allowTemplateLiterals: true }], 14 | 'prettier/prettier': [ 15 | 'error', 16 | { 17 | trailingComma: 'es5', 18 | singleQuote: true, 19 | printWidth: 80, 20 | }, 21 | ], 22 | 'vue/no-unused-components': [ 23 | 'error', 24 | { 25 | ignoreWhenBindingPresent: true, 26 | }, 27 | ], 28 | }, 29 | parserOptions: { 30 | parser: 'babel-eslint', 31 | }, 32 | }; 33 | -------------------------------------------------------------------------------- /06-component-communication/end/vue-heroes/.prettierrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | printWidth: 80, 3 | tabWidth: 2, 4 | bracketSpacing: true, 5 | singleQuote: true, 6 | trailingComma: 'all', 7 | }; 8 | -------------------------------------------------------------------------------- /06-component-communication/end/vue-heroes/.vscode/launch.json: -------------------------------------------------------------------------------- 1 | { 2 | // Use IntelliSense to learn about possible attributes. 3 | // Hover to view descriptions of existing attributes. 4 | // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 5 | "version": "0.2.0", 6 | "configurations": [ 7 | { 8 | "type": "chrome", 9 | "request": "launch", 10 | "name": "Vue: Chrome", 11 | "url": "http://localhost:9626", 12 | "webRoot": "${workspaceFolder}/src", 13 | "breakOnLoad": true, 14 | "sourceMapPathOverrides": { 15 | "webpack:///src/*": "${webRoot}/*", 16 | "webpack:///./src/*": "${webRoot}/*", 17 | "webpack:///./*": "${webRoot}/*", 18 | "webpack:///*": "*", 19 | "webpack:///./~/*": "${webRoot}/node_modules/*", 20 | "meteor://💻app/*": "${webRoot}/*" 21 | } 22 | } 23 | ] 24 | } -------------------------------------------------------------------------------- /06-component-communication/end/vue-heroes/.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "eslint.enable": true, 3 | "workbench.colorCustomizations": { 4 | "activityBar.background": "#65c89b", 5 | "activityBar.foreground": "#15202b", 6 | "activityBar.inactiveForeground": "#15202b99", 7 | "activityBarBadge.background": "#945bc4", 8 | "activityBarBadge.foreground": "#e7e7e7", 9 | "statusBar.background": "#42b883", 10 | "statusBarItem.hoverBackground": "#359268", 11 | "statusBar.foreground": "#15202b" 12 | } 13 | } -------------------------------------------------------------------------------- /06-component-communication/end/vue-heroes/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: ['@vue/app'], 3 | }; 4 | -------------------------------------------------------------------------------- /06-component-communication/end/vue-heroes/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-heroes", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "serve": "vue-cli-service serve", 7 | "build": "vue-cli-service build", 8 | "lint": "vue-cli-service lint" 9 | }, 10 | "dependencies": { 11 | "@fortawesome/fontawesome-svg-core": "^1.2.18", 12 | "@fortawesome/free-solid-svg-icons": "^5.8.2", 13 | "@fortawesome/vue-fontawesome": "^0.1.6", 14 | "bulma": "^0.7.5", 15 | "core-js": "^2.6.5", 16 | "date-fns": "^1.30.1", 17 | "vue": "^2.6.10" 18 | }, 19 | "devDependencies": { 20 | "@vue/cli-plugin-babel": "^3.7.0", 21 | "@vue/cli-plugin-eslint": "^3.7.0", 22 | "@vue/cli-service": "^3.7.0", 23 | "@vue/eslint-config-prettier": "^4.0.1", 24 | "babel-eslint": "^10.0.1", 25 | "eslint": "^5.16.0", 26 | "eslint-plugin-vue": "^5.0.0", 27 | "node-sass": "^4.9.0", 28 | "sass-loader": "^7.1.0", 29 | "vue-template-compiler": "^2.5.21" 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /06-component-communication/end/vue-heroes/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/johnpapa/vue-getting-started/2d37324d92c101d17291de37ae7575184790ef4c/06-component-communication/end/vue-heroes/public/favicon.ico -------------------------------------------------------------------------------- /06-component-communication/end/vue-heroes/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 14 | Vue Heroes 15 | 16 | 17 | 23 |
24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /06-component-communication/end/vue-heroes/src/app.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 21 | 22 | 25 | -------------------------------------------------------------------------------- /06-component-communication/end/vue-heroes/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/johnpapa/vue-getting-started/2d37324d92c101d17291de37ae7575184790ef4c/06-component-communication/end/vue-heroes/src/assets/logo.png -------------------------------------------------------------------------------- /06-component-communication/end/vue-heroes/src/components/header-bar-brand.vue: -------------------------------------------------------------------------------- 1 | 28 | -------------------------------------------------------------------------------- /06-component-communication/end/vue-heroes/src/components/header-bar-links.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | 28 | -------------------------------------------------------------------------------- /06-component-communication/end/vue-heroes/src/components/header-bar.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 23 | -------------------------------------------------------------------------------- /06-component-communication/end/vue-heroes/src/design/_variables.scss: -------------------------------------------------------------------------------- 1 | $vue: #42b883; 2 | $vue-light: #42b883; 3 | $primary: $vue; 4 | $primary-light: $vue-light; 5 | $link: $primary; 6 | $info: $primary; 7 | $shade-light: #fafafa; 8 | $accent-color: #00b3e6; -------------------------------------------------------------------------------- /06-component-communication/end/vue-heroes/src/design/index.scss: -------------------------------------------------------------------------------- 1 | @import 'bulma'; 2 | @import 'variables'; 3 | @import 'styles'; 4 | -------------------------------------------------------------------------------- /06-component-communication/end/vue-heroes/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import App from '@/app'; 3 | 4 | Vue.config.productionTip = false; 5 | 6 | new Vue({ 7 | render: h => h(App), 8 | }).$mount('#app'); 9 | -------------------------------------------------------------------------------- /06-component-communication/end/vue-heroes/src/shared/constants.js: -------------------------------------------------------------------------------- 1 | export const inputDateFormat = 'YYYY-MM-DD'; 2 | export const displayDateFormat = 'MMM DD, YYYY'; 3 | export const displayTimeFormat = 'HH:mm:ss.SSS'; 4 | -------------------------------------------------------------------------------- /06-component-communication/end/vue-heroes/src/shared/data.js: -------------------------------------------------------------------------------- 1 | import { format } from 'date-fns'; 2 | 3 | import { inputDateFormat } from './constants'; 4 | 5 | export const ourHeroes = [ 6 | { 7 | id: 10, 8 | firstName: 'Ella', 9 | lastName: 'Papa', 10 | capeCounter: 1, 11 | originDate: format(new Date(1996, 5, 1), inputDateFormat), 12 | description: 'fashionista', 13 | }, 14 | { 15 | id: 20, 16 | firstName: 'Madelyn', 17 | lastName: 'Papa', 18 | capeCounter: 3, 19 | originDate: format(new Date(1998, 7, 1), inputDateFormat), 20 | description: 'the cat whisperer', 21 | }, 22 | { 23 | id: 30, 24 | firstName: 'Haley', 25 | lastName: 'Papa', 26 | capeCounter: 2, 27 | originDate: format(new Date(1999, 8, 1), inputDateFormat), 28 | description: 'pen wielder', 29 | }, 30 | { 31 | id: 40, 32 | firstName: 'Landon', 33 | lastName: 'Papa', 34 | capeCounter: 0, 35 | originDate: format(new Date(2000, 9, 1), inputDateFormat), 36 | description: 'arc trooper', 37 | }, 38 | ]; 39 | -------------------------------------------------------------------------------- /06-component-communication/end/vue-heroes/src/shared/index.js: -------------------------------------------------------------------------------- 1 | export * from './constants'; 2 | export * from './data'; 3 | export * from './logger'; 4 | export * from './logging-mixins'; 5 | -------------------------------------------------------------------------------- /06-component-communication/end/vue-heroes/src/shared/logger.js: -------------------------------------------------------------------------------- 1 | import { format } from 'date-fns'; 2 | 3 | import { displayTimeFormat } from './constants'; 4 | 5 | export const logger = { 6 | info(message, data) { 7 | console.log(`Log ${format(Date.now(), displayTimeFormat)}: ${message}`); 8 | if (data) { 9 | console.log(JSON.stringify(data, null, 2)); 10 | } 11 | }, 12 | }; 13 | -------------------------------------------------------------------------------- /06-component-communication/end/vue-heroes/src/views/about.vue: -------------------------------------------------------------------------------- 1 | 24 | 25 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /06-component-communication/end/vue-heroes/vue.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | configureWebpack: { 3 | devtool: 'source-map', 4 | }, 5 | }; 6 | -------------------------------------------------------------------------------- /07-accessing-data/begin/vue-heroes/.browserslistrc: -------------------------------------------------------------------------------- 1 | > 1% 2 | last 2 versions 3 | -------------------------------------------------------------------------------- /07-accessing-data/begin/vue-heroes/.env: -------------------------------------------------------------------------------- 1 | NODE_ENV=production 2 | VUE_APP_API=api 3 | -------------------------------------------------------------------------------- /07-accessing-data/begin/vue-heroes/.env.development: -------------------------------------------------------------------------------- 1 | NODE_ENV=development 2 | VUE_APP_API=api 3 | -------------------------------------------------------------------------------- /07-accessing-data/begin/vue-heroes/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { 4 | node: true, 5 | }, 6 | extends: ['plugin:vue/essential', '@vue/prettier'], 7 | plugins: ['prettier'], 8 | // watch this for explaining why some of this is here 9 | // https://www.youtube.com/watch?time_continue=239&v=YIvjKId9m2c 10 | rules: { 11 | 'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off', 12 | 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off', 13 | quotes: [2, 'single', { avoidEscape: true, allowTemplateLiterals: true }], 14 | 'prettier/prettier': [ 15 | 'error', 16 | { 17 | trailingComma: 'es5', 18 | singleQuote: true, 19 | printWidth: 80, 20 | }, 21 | ], 22 | 'vue/no-unused-components': [ 23 | 'error', 24 | { 25 | ignoreWhenBindingPresent: true, 26 | }, 27 | ], 28 | }, 29 | parserOptions: { 30 | parser: 'babel-eslint', 31 | }, 32 | }; 33 | -------------------------------------------------------------------------------- /07-accessing-data/begin/vue-heroes/.prettierrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | printWidth: 80, 3 | tabWidth: 2, 4 | bracketSpacing: true, 5 | singleQuote: true, 6 | trailingComma: 'all', 7 | }; 8 | -------------------------------------------------------------------------------- /07-accessing-data/begin/vue-heroes/.vscode/launch.json: -------------------------------------------------------------------------------- 1 | { 2 | // Use IntelliSense to learn about possible attributes. 3 | // Hover to view descriptions of existing attributes. 4 | // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 5 | "version": "0.2.0", 6 | "configurations": [ 7 | { 8 | "type": "chrome", 9 | "request": "launch", 10 | "name": "Vue: Chrome", 11 | "url": "http://localhost:9626", 12 | "webRoot": "${workspaceFolder}/src", 13 | "breakOnLoad": true, 14 | "sourceMapPathOverrides": { 15 | "webpack:///src/*": "${webRoot}/*", 16 | "webpack:///./src/*": "${webRoot}/*", 17 | "webpack:///./*": "${webRoot}/*", 18 | "webpack:///*": "*", 19 | "webpack:///./~/*": "${webRoot}/node_modules/*", 20 | "meteor://💻app/*": "${webRoot}/*" 21 | } 22 | } 23 | ] 24 | } -------------------------------------------------------------------------------- /07-accessing-data/begin/vue-heroes/.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "eslint.enable": true, 3 | "workbench.colorCustomizations": { 4 | "activityBar.background": "#65c89b", 5 | "activityBar.foreground": "#15202b", 6 | "activityBar.inactiveForeground": "#15202b99", 7 | "activityBarBadge.background": "#945bc4", 8 | "activityBarBadge.foreground": "#e7e7e7", 9 | "statusBar.background": "#42b883", 10 | "statusBarItem.hoverBackground": "#359268", 11 | "statusBar.foreground": "#15202b" 12 | } 13 | } -------------------------------------------------------------------------------- /07-accessing-data/begin/vue-heroes/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: ['@vue/app'], 3 | }; 4 | -------------------------------------------------------------------------------- /07-accessing-data/begin/vue-heroes/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-heroes", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "serve": "vue-cli-service serve", 7 | "build": "vue-cli-service build", 8 | "lint": "vue-cli-service lint" 9 | }, 10 | "dependencies": { 11 | "@fortawesome/fontawesome-svg-core": "^1.2.18", 12 | "@fortawesome/free-solid-svg-icons": "^5.8.2", 13 | "@fortawesome/vue-fontawesome": "^0.1.6", 14 | "bulma": "^0.7.5", 15 | "core-js": "^2.6.5", 16 | "date-fns": "^1.30.1", 17 | "vue": "^2.6.10" 18 | }, 19 | "devDependencies": { 20 | "@vue/cli-plugin-babel": "^3.7.0", 21 | "@vue/cli-plugin-eslint": "^3.7.0", 22 | "@vue/cli-service": "^3.7.0", 23 | "@vue/eslint-config-prettier": "^4.0.1", 24 | "babel-eslint": "^10.0.1", 25 | "eslint": "^5.16.0", 26 | "eslint-plugin-vue": "^5.0.0", 27 | "node-sass": "^4.9.0", 28 | "sass-loader": "^7.1.0", 29 | "vue-template-compiler": "^2.5.21" 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /07-accessing-data/begin/vue-heroes/public/api/heroes.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "id": 10, 4 | "firstName": "Ella", 5 | "lastName": "Papa", 6 | "capeCounter": 1, 7 | "originDate": "June 06, 1996", 8 | "description": "fashionista" 9 | }, 10 | { 11 | "id": 20, 12 | "firstName": "Madelyn", 13 | "lastName": "Papa", 14 | "capeCounter": 3, 15 | "originDate": "08/01/1998", 16 | "description": "the cat whisperer" 17 | }, 18 | { 19 | "id": 30, 20 | "firstName": "Haley", 21 | "lastName": "Papa", 22 | "capeCounter": 2, 23 | "originDate": "09/01/1999", 24 | "description": "pen wielder" 25 | }, 26 | { 27 | "id": 40, 28 | "firstName": "Landon", 29 | "lastName": "Papa", 30 | "capeCounter": 0, 31 | "originDate": "10/01/2000", 32 | "description": "arc trooper" 33 | } 34 | ] 35 | -------------------------------------------------------------------------------- /07-accessing-data/begin/vue-heroes/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/johnpapa/vue-getting-started/2d37324d92c101d17291de37ae7575184790ef4c/07-accessing-data/begin/vue-heroes/public/favicon.ico -------------------------------------------------------------------------------- /07-accessing-data/begin/vue-heroes/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 14 | Vue Heroes 15 | 16 | 17 | 23 |
24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /07-accessing-data/begin/vue-heroes/src/app.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 21 | 22 | 25 | -------------------------------------------------------------------------------- /07-accessing-data/begin/vue-heroes/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/johnpapa/vue-getting-started/2d37324d92c101d17291de37ae7575184790ef4c/07-accessing-data/begin/vue-heroes/src/assets/logo.png -------------------------------------------------------------------------------- /07-accessing-data/begin/vue-heroes/src/components/header-bar-brand.vue: -------------------------------------------------------------------------------- 1 | 28 | -------------------------------------------------------------------------------- /07-accessing-data/begin/vue-heroes/src/components/header-bar-links.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | 28 | -------------------------------------------------------------------------------- /07-accessing-data/begin/vue-heroes/src/components/header-bar.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 23 | -------------------------------------------------------------------------------- /07-accessing-data/begin/vue-heroes/src/design/_variables.scss: -------------------------------------------------------------------------------- 1 | $vue: #42b883; 2 | $vue-light: #42b883; 3 | $primary: $vue; 4 | $primary-light: $vue-light; 5 | $link: $primary; 6 | $info: $primary; 7 | $shade-light: #fafafa; 8 | $accent-color: #00b3e6; -------------------------------------------------------------------------------- /07-accessing-data/begin/vue-heroes/src/design/index.scss: -------------------------------------------------------------------------------- 1 | @import 'bulma'; 2 | @import 'variables'; 3 | @import 'styles'; 4 | -------------------------------------------------------------------------------- /07-accessing-data/begin/vue-heroes/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import App from '@/app'; 3 | 4 | Vue.config.productionTip = false; 5 | 6 | new Vue({ 7 | render: h => h(App), 8 | }).$mount('#app'); 9 | -------------------------------------------------------------------------------- /07-accessing-data/begin/vue-heroes/src/shared/constants.js: -------------------------------------------------------------------------------- 1 | export const inputDateFormat = 'YYYY-MM-DD'; 2 | export const displayDateFormat = 'MMM DD, YYYY'; 3 | export const displayTimeFormat = 'HH:mm:ss.SSS'; 4 | -------------------------------------------------------------------------------- /07-accessing-data/begin/vue-heroes/src/shared/data.js: -------------------------------------------------------------------------------- 1 | import { format } from 'date-fns'; 2 | import { inputDateFormat } from './constants'; 3 | 4 | const ourHeroes = [ 5 | { 6 | id: 10, 7 | firstName: 'Ella', 8 | lastName: 'Papa', 9 | capeCounter: 1, 10 | originDate: format(new Date(1996, 5, 1), inputDateFormat), 11 | description: 'fashionista', 12 | }, 13 | { 14 | id: 20, 15 | firstName: 'Madelyn', 16 | lastName: 'Papa', 17 | capeCounter: 3, 18 | originDate: format(new Date(1998, 7, 1), inputDateFormat), 19 | description: 'the cat whisperer', 20 | }, 21 | { 22 | id: 30, 23 | firstName: 'Haley', 24 | lastName: 'Papa', 25 | capeCounter: 2, 26 | originDate: format(new Date(1999, 8, 1), inputDateFormat), 27 | description: 'pen wielder', 28 | }, 29 | { 30 | id: 40, 31 | firstName: 'Landon', 32 | lastName: 'Papa', 33 | capeCounter: 0, 34 | originDate: format(new Date(2000, 9, 1), inputDateFormat), 35 | description: 'arc trooper', 36 | }, 37 | ]; 38 | 39 | export const data = { 40 | ourHeroes, 41 | }; 42 | -------------------------------------------------------------------------------- /07-accessing-data/begin/vue-heroes/src/shared/index.js: -------------------------------------------------------------------------------- 1 | export * from './constants'; 2 | export * from './data'; 3 | export * from './logger'; 4 | export * from './logging-mixins'; 5 | -------------------------------------------------------------------------------- /07-accessing-data/begin/vue-heroes/src/shared/logger.js: -------------------------------------------------------------------------------- 1 | import { format } from 'date-fns'; 2 | 3 | import { displayTimeFormat } from './constants'; 4 | 5 | export const logger = { 6 | info(message, data) { 7 | console.log(`Log ${format(Date.now(), displayTimeFormat)}: ${message}`); 8 | if (data) { 9 | console.log(JSON.stringify(data, null, 2)); 10 | } 11 | }, 12 | }; 13 | -------------------------------------------------------------------------------- /07-accessing-data/begin/vue-heroes/src/views/about.vue: -------------------------------------------------------------------------------- 1 | 24 | 25 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /07-accessing-data/begin/vue-heroes/vue.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | configureWebpack: { 3 | devtool: 'source-map', 4 | }, 5 | }; 6 | -------------------------------------------------------------------------------- /07-accessing-data/end/vue-heroes/.browserslistrc: -------------------------------------------------------------------------------- 1 | > 1% 2 | last 2 versions 3 | -------------------------------------------------------------------------------- /07-accessing-data/end/vue-heroes/.env: -------------------------------------------------------------------------------- 1 | NODE_ENV=production 2 | VUE_APP_API=api 3 | -------------------------------------------------------------------------------- /07-accessing-data/end/vue-heroes/.env.development: -------------------------------------------------------------------------------- 1 | NODE_ENV=development 2 | VUE_APP_API=api 3 | -------------------------------------------------------------------------------- /07-accessing-data/end/vue-heroes/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { 4 | node: true, 5 | }, 6 | extends: ['plugin:vue/essential', '@vue/prettier'], 7 | plugins: ['prettier'], 8 | // watch this for explaining why some of this is here 9 | // https://www.youtube.com/watch?time_continue=239&v=YIvjKId9m2c 10 | rules: { 11 | 'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off', 12 | 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off', 13 | quotes: [2, 'single', { avoidEscape: true, allowTemplateLiterals: true }], 14 | 'prettier/prettier': [ 15 | 'error', 16 | { 17 | trailingComma: 'es5', 18 | singleQuote: true, 19 | printWidth: 80, 20 | }, 21 | ], 22 | 'vue/no-unused-components': [ 23 | 'error', 24 | { 25 | ignoreWhenBindingPresent: true, 26 | }, 27 | ], 28 | }, 29 | parserOptions: { 30 | parser: 'babel-eslint', 31 | }, 32 | }; 33 | -------------------------------------------------------------------------------- /07-accessing-data/end/vue-heroes/.prettierrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | printWidth: 80, 3 | tabWidth: 2, 4 | bracketSpacing: true, 5 | singleQuote: true, 6 | trailingComma: 'all', 7 | }; 8 | -------------------------------------------------------------------------------- /07-accessing-data/end/vue-heroes/.vscode/launch.json: -------------------------------------------------------------------------------- 1 | { 2 | // Use IntelliSense to learn about possible attributes. 3 | // Hover to view descriptions of existing attributes. 4 | // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 5 | "version": "0.2.0", 6 | "configurations": [ 7 | { 8 | "type": "chrome", 9 | "request": "launch", 10 | "name": "Vue: Chrome", 11 | "url": "http://localhost:9626", 12 | "webRoot": "${workspaceFolder}/src", 13 | "breakOnLoad": true, 14 | "sourceMapPathOverrides": { 15 | "webpack:///src/*": "${webRoot}/*", 16 | "webpack:///./src/*": "${webRoot}/*", 17 | "webpack:///./*": "${webRoot}/*", 18 | "webpack:///*": "*", 19 | "webpack:///./~/*": "${webRoot}/node_modules/*", 20 | "meteor://💻app/*": "${webRoot}/*" 21 | } 22 | } 23 | ] 24 | } -------------------------------------------------------------------------------- /07-accessing-data/end/vue-heroes/.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "eslint.enable": true, 3 | "workbench.colorCustomizations": { 4 | "activityBar.background": "#65c89b", 5 | "activityBar.foreground": "#15202b", 6 | "activityBar.inactiveForeground": "#15202b99", 7 | "activityBarBadge.background": "#945bc4", 8 | "activityBarBadge.foreground": "#e7e7e7", 9 | "statusBar.background": "#42b883", 10 | "statusBarItem.hoverBackground": "#359268", 11 | "statusBar.foreground": "#15202b" 12 | } 13 | } -------------------------------------------------------------------------------- /07-accessing-data/end/vue-heroes/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: ['@vue/app'], 3 | }; 4 | -------------------------------------------------------------------------------- /07-accessing-data/end/vue-heroes/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-heroes", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "serve": "vue-cli-service serve", 7 | "build": "vue-cli-service build", 8 | "lint": "vue-cli-service lint" 9 | }, 10 | "dependencies": { 11 | "@fortawesome/fontawesome-svg-core": "^1.2.18", 12 | "@fortawesome/free-solid-svg-icons": "^5.8.2", 13 | "@fortawesome/vue-fontawesome": "^0.1.6", 14 | "axios": "^0.19.0", 15 | "bulma": "^0.7.5", 16 | "core-js": "^2.6.5", 17 | "date-fns": "^1.30.1", 18 | "vue": "^2.6.10" 19 | }, 20 | "devDependencies": { 21 | "@vue/cli-plugin-babel": "^3.7.0", 22 | "@vue/cli-plugin-eslint": "^3.7.0", 23 | "@vue/cli-service": "^3.7.0", 24 | "@vue/eslint-config-prettier": "^4.0.1", 25 | "babel-eslint": "^10.0.1", 26 | "eslint": "^5.16.0", 27 | "eslint-plugin-vue": "^5.0.0", 28 | "node-sass": "^4.9.0", 29 | "sass-loader": "^7.1.0", 30 | "vue-template-compiler": "^2.5.21" 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /07-accessing-data/end/vue-heroes/public/api/heroes.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "id": 10, 4 | "firstName": "Ella", 5 | "lastName": "Papa", 6 | "capeCounter": 1, 7 | "originDate": "June 06, 1996", 8 | "description": "fashionista" 9 | }, 10 | { 11 | "id": 20, 12 | "firstName": "Madelyn", 13 | "lastName": "Papa", 14 | "capeCounter": 3, 15 | "originDate": "08/01/1998", 16 | "description": "the cat whisperer" 17 | }, 18 | { 19 | "id": 30, 20 | "firstName": "Haley", 21 | "lastName": "Papa", 22 | "capeCounter": 2, 23 | "originDate": "09/01/1999", 24 | "description": "pen wielder" 25 | }, 26 | { 27 | "id": 40, 28 | "firstName": "Landon", 29 | "lastName": "Papa", 30 | "capeCounter": 0, 31 | "originDate": "10/01/2000", 32 | "description": "arc trooper" 33 | } 34 | ] 35 | -------------------------------------------------------------------------------- /07-accessing-data/end/vue-heroes/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/johnpapa/vue-getting-started/2d37324d92c101d17291de37ae7575184790ef4c/07-accessing-data/end/vue-heroes/public/favicon.ico -------------------------------------------------------------------------------- /07-accessing-data/end/vue-heroes/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 14 | Vue Heroes 15 | 16 | 17 | 23 |
24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /07-accessing-data/end/vue-heroes/src/app.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 21 | 22 | 25 | -------------------------------------------------------------------------------- /07-accessing-data/end/vue-heroes/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/johnpapa/vue-getting-started/2d37324d92c101d17291de37ae7575184790ef4c/07-accessing-data/end/vue-heroes/src/assets/logo.png -------------------------------------------------------------------------------- /07-accessing-data/end/vue-heroes/src/components/header-bar-brand.vue: -------------------------------------------------------------------------------- 1 | 28 | -------------------------------------------------------------------------------- /07-accessing-data/end/vue-heroes/src/components/header-bar-links.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | 28 | -------------------------------------------------------------------------------- /07-accessing-data/end/vue-heroes/src/components/header-bar.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 23 | -------------------------------------------------------------------------------- /07-accessing-data/end/vue-heroes/src/design/_variables.scss: -------------------------------------------------------------------------------- 1 | $vue: #42b883; 2 | $vue-light: #42b883; 3 | $primary: $vue; 4 | $primary-light: $vue-light; 5 | $link: $primary; 6 | $info: $primary; 7 | $shade-light: #fafafa; 8 | $accent-color: #00b3e6; -------------------------------------------------------------------------------- /07-accessing-data/end/vue-heroes/src/design/index.scss: -------------------------------------------------------------------------------- 1 | @import 'bulma'; 2 | @import 'variables'; 3 | @import 'styles'; 4 | -------------------------------------------------------------------------------- /07-accessing-data/end/vue-heroes/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import App from '@/app'; 3 | 4 | Vue.config.productionTip = false; 5 | 6 | new Vue({ 7 | render: h => h(App), 8 | }).$mount('#app'); 9 | -------------------------------------------------------------------------------- /07-accessing-data/end/vue-heroes/src/shared/config.js: -------------------------------------------------------------------------------- 1 | export const API = process.env.VUE_APP_API; 2 | -------------------------------------------------------------------------------- /07-accessing-data/end/vue-heroes/src/shared/constants.js: -------------------------------------------------------------------------------- 1 | export const inputDateFormat = 'YYYY-MM-DD'; 2 | export const displayDateFormat = 'MMM DD, YYYY'; 3 | export const displayTimeFormat = 'HH:mm:ss.SSS'; 4 | -------------------------------------------------------------------------------- /07-accessing-data/end/vue-heroes/src/shared/index.js: -------------------------------------------------------------------------------- 1 | export * from './config'; 2 | export * from './constants'; 3 | export * from './data'; 4 | export * from './logger'; 5 | export * from './logging-mixins'; 6 | -------------------------------------------------------------------------------- /07-accessing-data/end/vue-heroes/src/shared/logger.js: -------------------------------------------------------------------------------- 1 | import { format } from 'date-fns'; 2 | 3 | import { displayTimeFormat } from './constants'; 4 | 5 | export const logger = { 6 | info(message, data) { 7 | console.log(`Log ${format(Date.now(), displayTimeFormat)}: ${message}`); 8 | if (data) { 9 | console.log(JSON.stringify(data, null, 2)); 10 | } 11 | }, 12 | }; 13 | -------------------------------------------------------------------------------- /07-accessing-data/end/vue-heroes/src/views/about.vue: -------------------------------------------------------------------------------- 1 | 24 | 25 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /07-accessing-data/end/vue-heroes/vue.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | configureWebpack: { 3 | devtool: 'source-map', 4 | }, 5 | }; 6 | -------------------------------------------------------------------------------- /08-routing/begin/vue-heroes/.browserslistrc: -------------------------------------------------------------------------------- 1 | > 1% 2 | last 2 versions 3 | -------------------------------------------------------------------------------- /08-routing/begin/vue-heroes/.env: -------------------------------------------------------------------------------- 1 | NODE_ENV=production 2 | VUE_APP_API=/api 3 | -------------------------------------------------------------------------------- /08-routing/begin/vue-heroes/.env.development: -------------------------------------------------------------------------------- 1 | NODE_ENV=development 2 | VUE_APP_API=/api 3 | -------------------------------------------------------------------------------- /08-routing/begin/vue-heroes/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { 4 | node: true, 5 | }, 6 | extends: ['plugin:vue/essential', '@vue/prettier'], 7 | plugins: ['prettier'], 8 | // watch this for explaining why some of this is here 9 | // https://www.youtube.com/watch?time_continue=239&v=YIvjKId9m2c 10 | rules: { 11 | 'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off', 12 | 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off', 13 | quotes: [2, 'single', { avoidEscape: true, allowTemplateLiterals: true }], 14 | 'prettier/prettier': [ 15 | 'error', 16 | { 17 | trailingComma: 'es5', 18 | singleQuote: true, 19 | printWidth: 80, 20 | }, 21 | ], 22 | 'vue/no-unused-components': [ 23 | 'error', 24 | { 25 | ignoreWhenBindingPresent: true, 26 | }, 27 | ], 28 | }, 29 | parserOptions: { 30 | parser: 'babel-eslint', 31 | }, 32 | }; 33 | -------------------------------------------------------------------------------- /08-routing/begin/vue-heroes/.prettierrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | printWidth: 80, 3 | tabWidth: 2, 4 | bracketSpacing: true, 5 | singleQuote: true, 6 | trailingComma: 'all', 7 | }; 8 | -------------------------------------------------------------------------------- /08-routing/begin/vue-heroes/.vscode/launch.json: -------------------------------------------------------------------------------- 1 | { 2 | // Use IntelliSense to learn about possible attributes. 3 | // Hover to view descriptions of existing attributes. 4 | // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 5 | "version": "0.2.0", 6 | "configurations": [ 7 | { 8 | "type": "chrome", 9 | "request": "launch", 10 | "name": "Vue: Chrome", 11 | "url": "http://localhost:9626", 12 | "webRoot": "${workspaceFolder}/src", 13 | "breakOnLoad": true, 14 | "sourceMapPathOverrides": { 15 | "webpack:///src/*": "${webRoot}/*", 16 | "webpack:///./src/*": "${webRoot}/*", 17 | "webpack:///./*": "${webRoot}/*", 18 | "webpack:///*": "*", 19 | "webpack:///./~/*": "${webRoot}/node_modules/*", 20 | "meteor://💻app/*": "${webRoot}/*" 21 | } 22 | } 23 | ] 24 | } -------------------------------------------------------------------------------- /08-routing/begin/vue-heroes/.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "eslint.enable": true, 3 | "workbench.colorCustomizations": { 4 | "activityBar.background": "#65c89b", 5 | "activityBar.foreground": "#15202b", 6 | "activityBar.inactiveForeground": "#15202b99", 7 | "activityBarBadge.background": "#945bc4", 8 | "activityBarBadge.foreground": "#e7e7e7", 9 | "statusBar.background": "#42b883", 10 | "statusBarItem.hoverBackground": "#359268", 11 | "statusBar.foreground": "#15202b" 12 | } 13 | } -------------------------------------------------------------------------------- /08-routing/begin/vue-heroes/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: ['@vue/app'], 3 | }; 4 | -------------------------------------------------------------------------------- /08-routing/begin/vue-heroes/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/johnpapa/vue-getting-started/2d37324d92c101d17291de37ae7575184790ef4c/08-routing/begin/vue-heroes/public/favicon.ico -------------------------------------------------------------------------------- /08-routing/begin/vue-heroes/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 14 | Vue Heroes 15 | 16 | 17 | 23 |
24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /08-routing/begin/vue-heroes/routes.json: -------------------------------------------------------------------------------- 1 | { 2 | "/api/*": "/$1", 3 | "/hero": "/heroes", 4 | "/reset": "/reset" 5 | } 6 | -------------------------------------------------------------------------------- /08-routing/begin/vue-heroes/src/app.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 21 | 22 | 25 | -------------------------------------------------------------------------------- /08-routing/begin/vue-heroes/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/johnpapa/vue-getting-started/2d37324d92c101d17291de37ae7575184790ef4c/08-routing/begin/vue-heroes/src/assets/logo.png -------------------------------------------------------------------------------- /08-routing/begin/vue-heroes/src/components/header-bar-brand.vue: -------------------------------------------------------------------------------- 1 | 28 | -------------------------------------------------------------------------------- /08-routing/begin/vue-heroes/src/components/header-bar-links.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | 28 | -------------------------------------------------------------------------------- /08-routing/begin/vue-heroes/src/components/header-bar.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 23 | -------------------------------------------------------------------------------- /08-routing/begin/vue-heroes/src/design/_variables.scss: -------------------------------------------------------------------------------- 1 | $vue: #42b883; 2 | $vue-light: #42b883; 3 | $primary: $vue; 4 | $primary-light: $vue-light; 5 | $link: $primary; 6 | $info: $primary; 7 | $shade-light: #fafafa; 8 | $accent-color: #00b3e6; -------------------------------------------------------------------------------- /08-routing/begin/vue-heroes/src/design/index.scss: -------------------------------------------------------------------------------- 1 | @import 'bulma'; 2 | @import 'variables'; 3 | @import 'styles'; 4 | -------------------------------------------------------------------------------- /08-routing/begin/vue-heroes/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import App from '@/app'; 3 | 4 | Vue.config.productionTip = false; 5 | 6 | new Vue({ 7 | render: h => h(App), 8 | }).$mount('#app'); 9 | -------------------------------------------------------------------------------- /08-routing/begin/vue-heroes/src/shared/config.js: -------------------------------------------------------------------------------- 1 | export const API = process.env.VUE_APP_API; 2 | -------------------------------------------------------------------------------- /08-routing/begin/vue-heroes/src/shared/constants.js: -------------------------------------------------------------------------------- 1 | export const inputDateFormat = 'YYYY-MM-DD'; 2 | export const displayDateFormat = 'MMM DD, YYYY'; 3 | export const displayTimeFormat = 'HH:mm:ss.SSS'; 4 | -------------------------------------------------------------------------------- /08-routing/begin/vue-heroes/src/shared/index.js: -------------------------------------------------------------------------------- 1 | export * from './config'; 2 | export * from './constants'; 3 | export * from './data.service'; 4 | export * from './logger'; 5 | export * from './logging-mixins'; 6 | -------------------------------------------------------------------------------- /08-routing/begin/vue-heroes/src/shared/logger.js: -------------------------------------------------------------------------------- 1 | import { format } from 'date-fns'; 2 | 3 | import { displayTimeFormat } from './constants'; 4 | 5 | export const logger = { 6 | info(message, data) { 7 | console.log(`Log ${format(Date.now(), displayTimeFormat)}: ${message}`); 8 | if (data) { 9 | console.log(JSON.stringify(data, null, 2)); 10 | } 11 | }, 12 | }; 13 | -------------------------------------------------------------------------------- /08-routing/begin/vue-heroes/src/shared/logging-mixins.js: -------------------------------------------------------------------------------- 1 | import { logger } from './'; 2 | 3 | const hookMessageSuffix = 'hook called (from mixin)'; 4 | 5 | export const lifecycleHooks = { 6 | // Computeds 7 | computed: { 8 | componentName() { 9 | return `${this.$options.name} component`; 10 | }, 11 | }, 12 | // LifeCycle Hooks 13 | created() { 14 | logger.info(`${this.componentName} created ${hookMessageSuffix}`); 15 | logger.info('component data', this.$data); 16 | }, 17 | mounted() { 18 | logger.info(`${this.componentName} mounted ${hookMessageSuffix}`); 19 | }, 20 | updated() { 21 | logger.info(`${this.componentName} updated ${hookMessageSuffix}`); 22 | }, 23 | destroyed() { 24 | logger.info(`${this.componentName} destroyed ${hookMessageSuffix}`); 25 | }, 26 | }; 27 | 28 | export const heroWatchers = { 29 | // Watchers 30 | watch: { 31 | selectedHero: { 32 | immediate: true, 33 | deep: true, 34 | handler(newValue, oldValue) { 35 | logger.info('old values', oldValue); 36 | logger.info('new values', newValue); 37 | }, 38 | }, 39 | }, 40 | }; 41 | -------------------------------------------------------------------------------- /08-routing/begin/vue-heroes/src/views/about.vue: -------------------------------------------------------------------------------- 1 | 24 | -------------------------------------------------------------------------------- /08-routing/begin/vue-heroes/src/views/page-not-found.vue: -------------------------------------------------------------------------------- 1 | 9 | -------------------------------------------------------------------------------- /08-routing/begin/vue-heroes/vue.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | configureWebpack: { 3 | devtool: 'source-map', 4 | }, 5 | devServer: { 6 | proxy: { 7 | '/api': { 8 | target: 'http://localhost:8888', // target host 9 | ws: true, // proxy websockets 10 | changeOrigin: true, // needed for virtual hosted sites 11 | }, 12 | }, 13 | }, 14 | }; 15 | -------------------------------------------------------------------------------- /08-routing/end/vue-heroes/.browserslistrc: -------------------------------------------------------------------------------- 1 | > 1% 2 | last 2 versions 3 | -------------------------------------------------------------------------------- /08-routing/end/vue-heroes/.env: -------------------------------------------------------------------------------- 1 | NODE_ENV=production 2 | VUE_APP_API=/api 3 | -------------------------------------------------------------------------------- /08-routing/end/vue-heroes/.env.development: -------------------------------------------------------------------------------- 1 | NODE_ENV=development 2 | VUE_APP_API=/api 3 | -------------------------------------------------------------------------------- /08-routing/end/vue-heroes/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { 4 | node: true, 5 | }, 6 | extends: ['plugin:vue/essential', '@vue/prettier'], 7 | plugins: ['prettier'], 8 | // watch this for explaining why some of this is here 9 | // https://www.youtube.com/watch?time_continue=239&v=YIvjKId9m2c 10 | rules: { 11 | 'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off', 12 | 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off', 13 | quotes: [2, 'single', { avoidEscape: true, allowTemplateLiterals: true }], 14 | 'prettier/prettier': [ 15 | 'error', 16 | { 17 | trailingComma: 'es5', 18 | singleQuote: true, 19 | printWidth: 80, 20 | }, 21 | ], 22 | 'vue/no-unused-components': [ 23 | 'error', 24 | { 25 | ignoreWhenBindingPresent: true, 26 | }, 27 | ], 28 | }, 29 | parserOptions: { 30 | parser: 'babel-eslint', 31 | }, 32 | }; 33 | -------------------------------------------------------------------------------- /08-routing/end/vue-heroes/.prettierrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | printWidth: 80, 3 | tabWidth: 2, 4 | bracketSpacing: true, 5 | singleQuote: true, 6 | trailingComma: 'all', 7 | }; 8 | -------------------------------------------------------------------------------- /08-routing/end/vue-heroes/.vscode/launch.json: -------------------------------------------------------------------------------- 1 | { 2 | // Use IntelliSense to learn about possible attributes. 3 | // Hover to view descriptions of existing attributes. 4 | // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 5 | "version": "0.2.0", 6 | "configurations": [ 7 | { 8 | "type": "chrome", 9 | "request": "launch", 10 | "name": "Vue: Chrome", 11 | "url": "http://localhost:9626", 12 | "webRoot": "${workspaceFolder}/src", 13 | "breakOnLoad": true, 14 | "sourceMapPathOverrides": { 15 | "webpack:///src/*": "${webRoot}/*", 16 | "webpack:///./src/*": "${webRoot}/*", 17 | "webpack:///./*": "${webRoot}/*", 18 | "webpack:///*": "*", 19 | "webpack:///./~/*": "${webRoot}/node_modules/*", 20 | "meteor://💻app/*": "${webRoot}/*" 21 | } 22 | } 23 | ] 24 | } -------------------------------------------------------------------------------- /08-routing/end/vue-heroes/.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "eslint.enable": true, 3 | "workbench.colorCustomizations": { 4 | "activityBar.background": "#65c89b", 5 | "activityBar.foreground": "#15202b", 6 | "activityBar.inactiveForeground": "#15202b99", 7 | "activityBarBadge.background": "#945bc4", 8 | "activityBarBadge.foreground": "#e7e7e7", 9 | "statusBar.background": "#42b883", 10 | "statusBarItem.hoverBackground": "#359268", 11 | "statusBar.foreground": "#15202b" 12 | } 13 | } -------------------------------------------------------------------------------- /08-routing/end/vue-heroes/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: ['@vue/app'], 3 | }; 4 | -------------------------------------------------------------------------------- /08-routing/end/vue-heroes/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/johnpapa/vue-getting-started/2d37324d92c101d17291de37ae7575184790ef4c/08-routing/end/vue-heroes/public/favicon.ico -------------------------------------------------------------------------------- /08-routing/end/vue-heroes/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 14 | Vue Heroes 15 | 16 | 17 | 23 |
24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /08-routing/end/vue-heroes/routes.json: -------------------------------------------------------------------------------- 1 | { 2 | "/api/*": "/$1", 3 | "/hero": "/heroes", 4 | "/reset": "/reset" 5 | } 6 | -------------------------------------------------------------------------------- /08-routing/end/vue-heroes/src/app.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 22 | 23 | 26 | -------------------------------------------------------------------------------- /08-routing/end/vue-heroes/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/johnpapa/vue-getting-started/2d37324d92c101d17291de37ae7575184790ef4c/08-routing/end/vue-heroes/src/assets/logo.png -------------------------------------------------------------------------------- /08-routing/end/vue-heroes/src/components/header-bar-brand.vue: -------------------------------------------------------------------------------- 1 | 28 | -------------------------------------------------------------------------------- /08-routing/end/vue-heroes/src/components/header-bar-links.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | 28 | -------------------------------------------------------------------------------- /08-routing/end/vue-heroes/src/components/header-bar.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 23 | -------------------------------------------------------------------------------- /08-routing/end/vue-heroes/src/components/nav-bar.vue: -------------------------------------------------------------------------------- 1 | 10 | -------------------------------------------------------------------------------- /08-routing/end/vue-heroes/src/design/_variables.scss: -------------------------------------------------------------------------------- 1 | $vue: #42b883; 2 | $vue-light: #42b883; 3 | $primary: $vue; 4 | $primary-light: $vue-light; 5 | $link: $primary; 6 | $info: $primary; 7 | $shade-light: #fafafa; 8 | $accent-color: #00b3e6; -------------------------------------------------------------------------------- /08-routing/end/vue-heroes/src/design/index.scss: -------------------------------------------------------------------------------- 1 | @import 'bulma'; 2 | @import 'variables'; 3 | @import 'styles'; 4 | -------------------------------------------------------------------------------- /08-routing/end/vue-heroes/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import App from '@/app'; 3 | import router from './router'; 4 | 5 | Vue.config.productionTip = false; 6 | 7 | new Vue({ 8 | router, 9 | render: h => h(App), 10 | }).$mount('#app'); 11 | -------------------------------------------------------------------------------- /08-routing/end/vue-heroes/src/shared/config.js: -------------------------------------------------------------------------------- 1 | export const API = process.env.VUE_APP_API; 2 | -------------------------------------------------------------------------------- /08-routing/end/vue-heroes/src/shared/constants.js: -------------------------------------------------------------------------------- 1 | export const inputDateFormat = 'YYYY-MM-DD'; 2 | export const displayDateFormat = 'MMM DD, YYYY'; 3 | export const displayTimeFormat = 'HH:mm:ss.SSS'; 4 | -------------------------------------------------------------------------------- /08-routing/end/vue-heroes/src/shared/index.js: -------------------------------------------------------------------------------- 1 | export * from './config'; 2 | export * from './constants'; 3 | export * from './data.service'; 4 | export * from './logger'; 5 | export * from './logging-mixins'; 6 | -------------------------------------------------------------------------------- /08-routing/end/vue-heroes/src/shared/logger.js: -------------------------------------------------------------------------------- 1 | import { format } from 'date-fns'; 2 | 3 | import { displayTimeFormat } from './constants'; 4 | 5 | export const logger = { 6 | info(message, data) { 7 | console.log(`Log ${format(Date.now(), displayTimeFormat)}: ${message}`); 8 | if (data) { 9 | console.log(JSON.stringify(data, null, 2)); 10 | } 11 | }, 12 | }; 13 | -------------------------------------------------------------------------------- /08-routing/end/vue-heroes/src/views/about.vue: -------------------------------------------------------------------------------- 1 | 24 | -------------------------------------------------------------------------------- /08-routing/end/vue-heroes/src/views/page-not-found.vue: -------------------------------------------------------------------------------- 1 | 9 | -------------------------------------------------------------------------------- /08-routing/end/vue-heroes/vue.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | configureWebpack: { 3 | devtool: 'source-map', 4 | }, 5 | devServer: { 6 | proxy: { 7 | '/api': { 8 | target: 'http://localhost:8888', // target host 9 | ws: true, // proxy websockets 10 | changeOrigin: true, // needed for virtual hosted sites 11 | }, 12 | }, 13 | }, 14 | }; 15 | -------------------------------------------------------------------------------- /09-managing-state/begin/vue-heroes/.browserslistrc: -------------------------------------------------------------------------------- 1 | > 1% 2 | last 2 versions 3 | -------------------------------------------------------------------------------- /09-managing-state/begin/vue-heroes/.env: -------------------------------------------------------------------------------- 1 | NODE_ENV=production 2 | VUE_APP_API=/api 3 | -------------------------------------------------------------------------------- /09-managing-state/begin/vue-heroes/.env.development: -------------------------------------------------------------------------------- 1 | NODE_ENV=development 2 | VUE_APP_API=/api 3 | -------------------------------------------------------------------------------- /09-managing-state/begin/vue-heroes/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { 4 | node: true, 5 | }, 6 | extends: ['plugin:vue/essential', '@vue/prettier'], 7 | plugins: ['prettier'], 8 | // watch this for explaining why some of this is here 9 | // https://www.youtube.com/watch?time_continue=239&v=YIvjKId9m2c 10 | rules: { 11 | 'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off', 12 | 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off', 13 | quotes: [2, 'single', { avoidEscape: true, allowTemplateLiterals: true }], 14 | 'prettier/prettier': [ 15 | 'error', 16 | { 17 | trailingComma: 'es5', 18 | singleQuote: true, 19 | printWidth: 80, 20 | }, 21 | ], 22 | 'vue/no-unused-components': [ 23 | 'error', 24 | { 25 | ignoreWhenBindingPresent: true, 26 | }, 27 | ], 28 | }, 29 | parserOptions: { 30 | parser: 'babel-eslint', 31 | }, 32 | }; 33 | -------------------------------------------------------------------------------- /09-managing-state/begin/vue-heroes/.prettierrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | printWidth: 80, 3 | tabWidth: 2, 4 | bracketSpacing: true, 5 | singleQuote: true, 6 | trailingComma: 'all', 7 | }; 8 | -------------------------------------------------------------------------------- /09-managing-state/begin/vue-heroes/.vscode/launch.json: -------------------------------------------------------------------------------- 1 | { 2 | // Use IntelliSense to learn about possible attributes. 3 | // Hover to view descriptions of existing attributes. 4 | // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 5 | "version": "0.2.0", 6 | "configurations": [ 7 | { 8 | "type": "chrome", 9 | "request": "launch", 10 | "name": "Vue: Chrome", 11 | "url": "http://localhost:9626", 12 | "webRoot": "${workspaceFolder}/src", 13 | "breakOnLoad": true, 14 | "sourceMapPathOverrides": { 15 | "webpack:///src/*": "${webRoot}/*", 16 | "webpack:///./src/*": "${webRoot}/*", 17 | "webpack:///./*": "${webRoot}/*", 18 | "webpack:///*": "*", 19 | "webpack:///./~/*": "${webRoot}/node_modules/*", 20 | "meteor://💻app/*": "${webRoot}/*" 21 | } 22 | } 23 | ] 24 | } -------------------------------------------------------------------------------- /09-managing-state/begin/vue-heroes/.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "eslint.enable": true, 3 | "workbench.colorCustomizations": { 4 | "activityBar.background": "#65c89b", 5 | "activityBar.foreground": "#15202b", 6 | "activityBar.inactiveForeground": "#15202b99", 7 | "activityBarBadge.background": "#945bc4", 8 | "activityBarBadge.foreground": "#e7e7e7", 9 | "statusBar.background": "#42b883", 10 | "statusBarItem.hoverBackground": "#359268", 11 | "statusBar.foreground": "#15202b" 12 | } 13 | } -------------------------------------------------------------------------------- /09-managing-state/begin/vue-heroes/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: ['@vue/app'], 3 | }; 4 | -------------------------------------------------------------------------------- /09-managing-state/begin/vue-heroes/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/johnpapa/vue-getting-started/2d37324d92c101d17291de37ae7575184790ef4c/09-managing-state/begin/vue-heroes/public/favicon.ico -------------------------------------------------------------------------------- /09-managing-state/begin/vue-heroes/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 14 | Vue Heroes 15 | 16 | 17 | 23 |
24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /09-managing-state/begin/vue-heroes/routes.json: -------------------------------------------------------------------------------- 1 | { 2 | "/api/*": "/$1", 3 | "/hero": "/heroes", 4 | "/reset": "/reset" 5 | } 6 | -------------------------------------------------------------------------------- /09-managing-state/begin/vue-heroes/src/app.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 22 | 23 | 26 | -------------------------------------------------------------------------------- /09-managing-state/begin/vue-heroes/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/johnpapa/vue-getting-started/2d37324d92c101d17291de37ae7575184790ef4c/09-managing-state/begin/vue-heroes/src/assets/logo.png -------------------------------------------------------------------------------- /09-managing-state/begin/vue-heroes/src/components/header-bar-brand.vue: -------------------------------------------------------------------------------- 1 | 28 | -------------------------------------------------------------------------------- /09-managing-state/begin/vue-heroes/src/components/header-bar-links.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | 28 | -------------------------------------------------------------------------------- /09-managing-state/begin/vue-heroes/src/components/header-bar.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 23 | -------------------------------------------------------------------------------- /09-managing-state/begin/vue-heroes/src/components/modal.vue: -------------------------------------------------------------------------------- 1 | 16 | 17 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /09-managing-state/begin/vue-heroes/src/components/nav-bar.vue: -------------------------------------------------------------------------------- 1 | 10 | -------------------------------------------------------------------------------- /09-managing-state/begin/vue-heroes/src/design/_variables.scss: -------------------------------------------------------------------------------- 1 | $vue: #42b883; 2 | $vue-light: #42b883; 3 | $primary: $vue; 4 | $primary-light: $vue-light; 5 | $link: $primary; 6 | $info: $primary; 7 | $shade-light: #fafafa; 8 | $accent-color: #00b3e6; -------------------------------------------------------------------------------- /09-managing-state/begin/vue-heroes/src/design/index.scss: -------------------------------------------------------------------------------- 1 | @import 'bulma'; 2 | @import 'variables'; 3 | @import 'styles'; 4 | -------------------------------------------------------------------------------- /09-managing-state/begin/vue-heroes/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import App from '@/app'; 3 | import router from './router'; 4 | 5 | Vue.config.productionTip = false; 6 | 7 | new Vue({ 8 | router, 9 | render: h => h(App), 10 | }).$mount('#app'); 11 | -------------------------------------------------------------------------------- /09-managing-state/begin/vue-heroes/src/shared/config.js: -------------------------------------------------------------------------------- 1 | export const API = process.env.VUE_APP_API; 2 | -------------------------------------------------------------------------------- /09-managing-state/begin/vue-heroes/src/shared/constants.js: -------------------------------------------------------------------------------- 1 | export const inputDateFormat = 'YYYY-MM-DD'; 2 | export const displayDateFormat = 'MMM DD, YYYY'; 3 | export const displayTimeFormat = 'HH:mm:ss.SSS'; 4 | -------------------------------------------------------------------------------- /09-managing-state/begin/vue-heroes/src/shared/index.js: -------------------------------------------------------------------------------- 1 | export * from './config'; 2 | export * from './constants'; 3 | export * from './data.service'; 4 | export * from './logger'; 5 | export * from './logging-mixins'; 6 | -------------------------------------------------------------------------------- /09-managing-state/begin/vue-heroes/src/shared/logger.js: -------------------------------------------------------------------------------- 1 | import { format } from 'date-fns'; 2 | 3 | import { displayTimeFormat } from './constants'; 4 | 5 | export const logger = { 6 | info(message, data) { 7 | console.log(`Log ${format(Date.now(), displayTimeFormat)}: ${message}`); 8 | if (data) { 9 | console.log(JSON.stringify(data, null, 2)); 10 | } 11 | }, 12 | }; 13 | -------------------------------------------------------------------------------- /09-managing-state/begin/vue-heroes/src/views/about.vue: -------------------------------------------------------------------------------- 1 | 24 | -------------------------------------------------------------------------------- /09-managing-state/begin/vue-heroes/src/views/page-not-found.vue: -------------------------------------------------------------------------------- 1 | 9 | -------------------------------------------------------------------------------- /09-managing-state/begin/vue-heroes/vue.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | configureWebpack: { 3 | devtool: 'source-map', 4 | }, 5 | devServer: { 6 | proxy: { 7 | '/api': { 8 | target: 'http://localhost:8888', // target host 9 | ws: true, // proxy websockets 10 | changeOrigin: true, // needed for virtual hosted sites 11 | }, 12 | }, 13 | }, 14 | }; 15 | -------------------------------------------------------------------------------- /09-managing-state/end/vue-heroes/.browserslistrc: -------------------------------------------------------------------------------- 1 | > 1% 2 | last 2 versions 3 | -------------------------------------------------------------------------------- /09-managing-state/end/vue-heroes/.env: -------------------------------------------------------------------------------- 1 | NODE_ENV=production 2 | VUE_APP_API=/api 3 | -------------------------------------------------------------------------------- /09-managing-state/end/vue-heroes/.env.development: -------------------------------------------------------------------------------- 1 | NODE_ENV=development 2 | VUE_APP_API=/api 3 | -------------------------------------------------------------------------------- /09-managing-state/end/vue-heroes/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { 4 | node: true, 5 | }, 6 | extends: ['plugin:vue/essential', '@vue/prettier'], 7 | plugins: ['prettier'], 8 | // watch this for explaining why some of this is here 9 | // https://www.youtube.com/watch?time_continue=239&v=YIvjKId9m2c 10 | rules: { 11 | 'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off', 12 | 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off', 13 | quotes: [2, 'single', { avoidEscape: true, allowTemplateLiterals: true }], 14 | 'prettier/prettier': [ 15 | 'error', 16 | { 17 | trailingComma: 'es5', 18 | singleQuote: true, 19 | printWidth: 80, 20 | }, 21 | ], 22 | 'vue/no-unused-components': [ 23 | 'error', 24 | { 25 | ignoreWhenBindingPresent: true, 26 | }, 27 | ], 28 | }, 29 | parserOptions: { 30 | parser: 'babel-eslint', 31 | }, 32 | }; 33 | -------------------------------------------------------------------------------- /09-managing-state/end/vue-heroes/.prettierrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | printWidth: 80, 3 | tabWidth: 2, 4 | bracketSpacing: true, 5 | singleQuote: true, 6 | trailingComma: 'all', 7 | }; 8 | -------------------------------------------------------------------------------- /09-managing-state/end/vue-heroes/.vscode/launch.json: -------------------------------------------------------------------------------- 1 | { 2 | // Use IntelliSense to learn about possible attributes. 3 | // Hover to view descriptions of existing attributes. 4 | // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 5 | "version": "0.2.0", 6 | "configurations": [ 7 | { 8 | "type": "chrome", 9 | "request": "launch", 10 | "name": "Vue: Chrome", 11 | "url": "http://localhost:9626", 12 | "webRoot": "${workspaceFolder}/src", 13 | "breakOnLoad": true, 14 | "sourceMapPathOverrides": { 15 | "webpack:///src/*": "${webRoot}/*", 16 | "webpack:///./src/*": "${webRoot}/*", 17 | "webpack:///./*": "${webRoot}/*", 18 | "webpack:///*": "*", 19 | "webpack:///./~/*": "${webRoot}/node_modules/*", 20 | "meteor://💻app/*": "${webRoot}/*" 21 | } 22 | } 23 | ] 24 | } -------------------------------------------------------------------------------- /09-managing-state/end/vue-heroes/.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "eslint.enable": true, 3 | "workbench.colorCustomizations": { 4 | "activityBar.background": "#65c89b", 5 | "activityBar.foreground": "#15202b", 6 | "activityBar.inactiveForeground": "#15202b99", 7 | "activityBarBadge.background": "#945bc4", 8 | "activityBarBadge.foreground": "#e7e7e7", 9 | "statusBar.background": "#42b883", 10 | "statusBarItem.hoverBackground": "#359268", 11 | "statusBar.foreground": "#15202b" 12 | } 13 | } -------------------------------------------------------------------------------- /09-managing-state/end/vue-heroes/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: ['@vue/app'], 3 | }; 4 | -------------------------------------------------------------------------------- /09-managing-state/end/vue-heroes/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/johnpapa/vue-getting-started/2d37324d92c101d17291de37ae7575184790ef4c/09-managing-state/end/vue-heroes/public/favicon.ico -------------------------------------------------------------------------------- /09-managing-state/end/vue-heroes/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 14 | Vue Heroes 15 | 16 | 17 | 23 |
24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /09-managing-state/end/vue-heroes/routes.json: -------------------------------------------------------------------------------- 1 | { 2 | "/api/*": "/$1", 3 | "/hero": "/heroes", 4 | "/reset": "/reset" 5 | } 6 | -------------------------------------------------------------------------------- /09-managing-state/end/vue-heroes/src/app.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 22 | 23 | 26 | -------------------------------------------------------------------------------- /09-managing-state/end/vue-heroes/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/johnpapa/vue-getting-started/2d37324d92c101d17291de37ae7575184790ef4c/09-managing-state/end/vue-heroes/src/assets/logo.png -------------------------------------------------------------------------------- /09-managing-state/end/vue-heroes/src/components/header-bar-brand.vue: -------------------------------------------------------------------------------- 1 | 28 | -------------------------------------------------------------------------------- /09-managing-state/end/vue-heroes/src/components/header-bar-links.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | 28 | -------------------------------------------------------------------------------- /09-managing-state/end/vue-heroes/src/components/header-bar.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 23 | -------------------------------------------------------------------------------- /09-managing-state/end/vue-heroes/src/components/modal.vue: -------------------------------------------------------------------------------- 1 | 16 | 17 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /09-managing-state/end/vue-heroes/src/components/nav-bar.vue: -------------------------------------------------------------------------------- 1 | 10 | -------------------------------------------------------------------------------- /09-managing-state/end/vue-heroes/src/design/_variables.scss: -------------------------------------------------------------------------------- 1 | $vue: #42b883; 2 | $vue-light: #42b883; 3 | $primary: $vue; 4 | $primary-light: $vue-light; 5 | $link: $primary; 6 | $info: $primary; 7 | $shade-light: #fafafa; 8 | $accent-color: #00b3e6; -------------------------------------------------------------------------------- /09-managing-state/end/vue-heroes/src/design/index.scss: -------------------------------------------------------------------------------- 1 | @import 'bulma'; 2 | @import 'variables'; 3 | @import 'styles'; 4 | -------------------------------------------------------------------------------- /09-managing-state/end/vue-heroes/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import App from '@/app'; 3 | import router from './router'; 4 | import store from './store'; 5 | 6 | Vue.config.productionTip = false; 7 | 8 | new Vue({ 9 | router, 10 | store, 11 | render: h => h(App), 12 | }).$mount('#app'); 13 | -------------------------------------------------------------------------------- /09-managing-state/end/vue-heroes/src/shared/config.js: -------------------------------------------------------------------------------- 1 | export const API = process.env.VUE_APP_API; 2 | -------------------------------------------------------------------------------- /09-managing-state/end/vue-heroes/src/shared/constants.js: -------------------------------------------------------------------------------- 1 | export const inputDateFormat = 'YYYY-MM-DD'; 2 | export const displayDateFormat = 'MMM DD, YYYY'; 3 | export const displayTimeFormat = 'HH:mm:ss.SSS'; 4 | -------------------------------------------------------------------------------- /09-managing-state/end/vue-heroes/src/shared/index.js: -------------------------------------------------------------------------------- 1 | export * from './config'; 2 | export * from './constants'; 3 | export * from './data.service'; 4 | export * from './logger'; 5 | export * from './logging-mixins'; 6 | -------------------------------------------------------------------------------- /09-managing-state/end/vue-heroes/src/shared/logger.js: -------------------------------------------------------------------------------- 1 | import { format } from 'date-fns'; 2 | 3 | import { displayTimeFormat } from './constants'; 4 | 5 | export const logger = { 6 | info(message, data) { 7 | console.log(`Log ${format(Date.now(), displayTimeFormat)}: ${message}`); 8 | if (data) { 9 | console.log(JSON.stringify(data, null, 2)); 10 | } 11 | }, 12 | }; 13 | -------------------------------------------------------------------------------- /09-managing-state/end/vue-heroes/src/store/mutation-types.js: -------------------------------------------------------------------------------- 1 | export const GET_HEROES = 'getHeroes'; 2 | export const ADD_HERO = 'addHero'; 3 | export const DELETE_HERO = 'deleteHero'; 4 | export const UPDATE_HERO = 'udpateHero'; 5 | -------------------------------------------------------------------------------- /09-managing-state/end/vue-heroes/src/views/about.vue: -------------------------------------------------------------------------------- 1 | 24 | -------------------------------------------------------------------------------- /09-managing-state/end/vue-heroes/src/views/page-not-found.vue: -------------------------------------------------------------------------------- 1 | 9 | -------------------------------------------------------------------------------- /09-managing-state/end/vue-heroes/vue.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | configureWebpack: { 3 | devtool: 'source-map', 4 | }, 5 | devServer: { 6 | proxy: { 7 | '/api': { 8 | target: 'http://localhost:8888', // target host 9 | ws: true, // proxy websockets 10 | changeOrigin: true, // needed for virtual hosted sites 11 | }, 12 | }, 13 | }, 14 | }; 15 | -------------------------------------------------------------------------------- /xx-final/vue-heroes/.browserslistrc: -------------------------------------------------------------------------------- 1 | > 1% 2 | last 2 versions 3 | -------------------------------------------------------------------------------- /xx-final/vue-heroes/.env: -------------------------------------------------------------------------------- 1 | NODE_ENV=production 2 | VUE_APP_API=/api 3 | -------------------------------------------------------------------------------- /xx-final/vue-heroes/.env.development: -------------------------------------------------------------------------------- 1 | NODE_ENV=development 2 | VUE_APP_API=/api 3 | -------------------------------------------------------------------------------- /xx-final/vue-heroes/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { 4 | node: true, 5 | }, 6 | extends: ['plugin:vue/essential', '@vue/prettier'], 7 | plugins: ['prettier'], 8 | // watch this for explaining why some of this is here 9 | // https://www.youtube.com/watch?time_continue=239&v=YIvjKId9m2c 10 | rules: { 11 | 'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off', 12 | 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off', 13 | quotes: [2, 'single', { avoidEscape: true, allowTemplateLiterals: true }], 14 | 'prettier/prettier': [ 15 | 'error', 16 | { 17 | trailingComma: 'es5', 18 | singleQuote: true, 19 | printWidth: 80, 20 | }, 21 | ], 22 | 'vue/no-unused-components': [ 23 | 'error', 24 | { 25 | ignoreWhenBindingPresent: true, 26 | }, 27 | ], 28 | }, 29 | parserOptions: { 30 | parser: 'babel-eslint', 31 | }, 32 | }; 33 | -------------------------------------------------------------------------------- /xx-final/vue-heroes/.prettierrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | printWidth: 80, 3 | tabWidth: 2, 4 | bracketSpacing: true, 5 | singleQuote: true, 6 | trailingComma: 'all', 7 | }; 8 | -------------------------------------------------------------------------------- /xx-final/vue-heroes/.vscode/launch.json: -------------------------------------------------------------------------------- 1 | { 2 | // Use IntelliSense to learn about possible attributes. 3 | // Hover to view descriptions of existing attributes. 4 | // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 5 | "version": "0.2.0", 6 | "configurations": [ 7 | { 8 | "type": "chrome", 9 | "request": "launch", 10 | "name": "Vue: Chrome", 11 | "url": "http://localhost:9626", 12 | "webRoot": "${workspaceFolder}/src", 13 | "breakOnLoad": true, 14 | "sourceMapPathOverrides": { 15 | "webpack:///src/*": "${webRoot}/*", 16 | "webpack:///./src/*": "${webRoot}/*", 17 | "webpack:///./*": "${webRoot}/*", 18 | "webpack:///*": "*", 19 | "webpack:///./~/*": "${webRoot}/node_modules/*", 20 | "meteor://💻app/*": "${webRoot}/*" 21 | } 22 | } 23 | ] 24 | } -------------------------------------------------------------------------------- /xx-final/vue-heroes/.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "eslint.enable": true, 3 | "workbench.colorCustomizations": { 4 | "activityBar.background": "#65c89b", 5 | "activityBar.foreground": "#15202b", 6 | "activityBar.inactiveForeground": "#15202b99", 7 | "activityBarBadge.background": "#945bc4", 8 | "activityBarBadge.foreground": "#e7e7e7", 9 | "statusBar.background": "#42b883", 10 | "statusBarItem.hoverBackground": "#359268", 11 | "statusBar.foreground": "#15202b" 12 | } 13 | } -------------------------------------------------------------------------------- /xx-final/vue-heroes/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: ['@vue/app'], 3 | }; 4 | -------------------------------------------------------------------------------- /xx-final/vue-heroes/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/johnpapa/vue-getting-started/2d37324d92c101d17291de37ae7575184790ef4c/xx-final/vue-heroes/public/favicon.ico -------------------------------------------------------------------------------- /xx-final/vue-heroes/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 14 | Vue Heroes 15 | 16 | 17 | 23 |
24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /xx-final/vue-heroes/routes.json: -------------------------------------------------------------------------------- 1 | { 2 | "/api/*": "/$1", 3 | "/hero": "/heroes", 4 | "/reset": "/reset" 5 | } 6 | -------------------------------------------------------------------------------- /xx-final/vue-heroes/src/app.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 22 | 23 | 26 | -------------------------------------------------------------------------------- /xx-final/vue-heroes/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/johnpapa/vue-getting-started/2d37324d92c101d17291de37ae7575184790ef4c/xx-final/vue-heroes/src/assets/logo.png -------------------------------------------------------------------------------- /xx-final/vue-heroes/src/components/header-bar-brand.vue: -------------------------------------------------------------------------------- 1 | 28 | -------------------------------------------------------------------------------- /xx-final/vue-heroes/src/components/header-bar-links.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | 28 | -------------------------------------------------------------------------------- /xx-final/vue-heroes/src/components/header-bar.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 23 | -------------------------------------------------------------------------------- /xx-final/vue-heroes/src/components/modal.vue: -------------------------------------------------------------------------------- 1 | 16 | 17 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /xx-final/vue-heroes/src/components/nav-bar.vue: -------------------------------------------------------------------------------- 1 | 11 | -------------------------------------------------------------------------------- /xx-final/vue-heroes/src/design/_variables.scss: -------------------------------------------------------------------------------- 1 | $vue: #42b883; 2 | $vue-light: #42b883; 3 | $primary: $vue; 4 | $primary-light: $vue-light; 5 | $link: $primary; 6 | $info: $primary; 7 | $shade-light: #fafafa; 8 | $accent-color: #00b3e6; -------------------------------------------------------------------------------- /xx-final/vue-heroes/src/design/index.scss: -------------------------------------------------------------------------------- 1 | @import 'bulma'; 2 | @import 'variables'; 3 | @import 'styles'; 4 | -------------------------------------------------------------------------------- /xx-final/vue-heroes/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import App from '@/app'; 3 | import router from './router'; 4 | import store from './store'; 5 | 6 | Vue.config.productionTip = false; 7 | 8 | new Vue({ 9 | router, 10 | store, 11 | render: h => h(App), 12 | }).$mount('#app'); 13 | -------------------------------------------------------------------------------- /xx-final/vue-heroes/src/shared/config.js: -------------------------------------------------------------------------------- 1 | export const API = process.env.VUE_APP_API; 2 | -------------------------------------------------------------------------------- /xx-final/vue-heroes/src/shared/constants.js: -------------------------------------------------------------------------------- 1 | export const inputDateFormat = 'YYYY-MM-DD'; 2 | export const displayDateFormat = 'MMM DD, YYYY'; 3 | export const displayTimeFormat = 'HH:mm:ss.SSS'; 4 | -------------------------------------------------------------------------------- /xx-final/vue-heroes/src/shared/index.js: -------------------------------------------------------------------------------- 1 | export * from './config'; 2 | export * from './constants'; 3 | export * from './data.service'; 4 | export * from './logger'; 5 | export * from './logging-mixins'; 6 | -------------------------------------------------------------------------------- /xx-final/vue-heroes/src/shared/logger.js: -------------------------------------------------------------------------------- 1 | import { format } from 'date-fns'; 2 | 3 | import { displayTimeFormat } from './constants'; 4 | 5 | export const logger = { 6 | info(message, data) { 7 | console.log(`Log ${format(Date.now(), displayTimeFormat)}: ${message}`); 8 | if (data) { 9 | console.log(JSON.stringify(data, null, 2)); 10 | } 11 | }, 12 | }; 13 | -------------------------------------------------------------------------------- /xx-final/vue-heroes/src/shared/logging-mixins.js: -------------------------------------------------------------------------------- 1 | import { logger } from './'; 2 | 3 | const hookMessageSuffix = 'hook called (from mixin)'; 4 | 5 | export const lifecycleHooks = { 6 | // Computeds 7 | computed: { 8 | componentName() { 9 | return `${this.$options.name} component`; 10 | }, 11 | }, 12 | // LifeCycle Hooks 13 | created() { 14 | logger.info(`${this.componentName} created ${hookMessageSuffix}`); 15 | logger.info('component data', this.$data); 16 | }, 17 | mounted() { 18 | logger.info(`${this.componentName} mounted ${hookMessageSuffix}`); 19 | }, 20 | updated() { 21 | logger.info(`${this.componentName} updated ${hookMessageSuffix}`); 22 | }, 23 | destroyed() { 24 | logger.info(`${this.componentName} destroyed ${hookMessageSuffix}`); 25 | }, 26 | }; 27 | 28 | export const heroWatchers = { 29 | // Watchers 30 | watch: { 31 | selectedHero: { 32 | immediate: true, 33 | deep: true, 34 | handler(newValue, oldValue) { 35 | logger.info('old values', oldValue); 36 | logger.info('new values', newValue); 37 | }, 38 | }, 39 | }, 40 | }; 41 | -------------------------------------------------------------------------------- /xx-final/vue-heroes/src/store/mutation-types.js: -------------------------------------------------------------------------------- 1 | export const GET_HEROES = 'getHeroes'; 2 | export const ADD_HERO = 'addHero'; 3 | export const UPDATE_HERO = 'updateHero'; 4 | export const DELETE_HERO = 'deleteHero'; 5 | export const GET_VILLAINS = 'getVillains'; 6 | export const ADD_VILLAIN = 'addVillain'; 7 | export const UPDATE_VILLAIN = 'updateVillain'; 8 | export const DELETE_VILLAIN = 'deleteVillain'; 9 | -------------------------------------------------------------------------------- /xx-final/vue-heroes/src/views/about.vue: -------------------------------------------------------------------------------- 1 | 24 | -------------------------------------------------------------------------------- /xx-final/vue-heroes/src/views/page-not-found.vue: -------------------------------------------------------------------------------- 1 | 9 | -------------------------------------------------------------------------------- /xx-final/vue-heroes/vue.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | configureWebpack: { 3 | devtool: 'source-map', 4 | }, 5 | devServer: { 6 | proxy: { 7 | '/api': { 8 | target: 'http://localhost:8888', // target host 9 | ws: true, // proxy websockets 10 | changeOrigin: true, // needed for virtual hosted sites 11 | }, 12 | }, 13 | }, 14 | }; 15 | --------------------------------------------------------------------------------