├── .DS_Store ├── 01-Counter ├── .DS_Store ├── JSApp │ ├── index.html │ ├── index.js │ └── styles.css └── VueApp │ ├── .gitignore │ ├── .vscode │ └── extensions.json │ ├── README.md │ ├── index.html │ ├── package-lock.json │ ├── package.json │ ├── public │ └── favicon.ico │ ├── src │ ├── App.vue │ ├── assets │ │ ├── base.css │ │ ├── logo.svg │ │ └── main.css │ ├── components │ │ ├── HelloWorld.vue │ │ ├── TheWelcome.vue │ │ ├── WelcomeItem.vue │ │ └── icons │ │ │ ├── IconCommunity.vue │ │ │ ├── IconDocumentation.vue │ │ │ ├── IconEcosystem.vue │ │ │ ├── IconSupport.vue │ │ │ └── IconTooling.vue │ └── main.js │ └── vite.config.js ├── 02-Notes ├── .gitignore ├── .vscode │ └── extensions.json ├── README.md ├── index.html ├── package-lock.json ├── package.json ├── public │ └── favicon.ico ├── src │ ├── App.vue │ ├── assets │ │ ├── base.css │ │ ├── logo.svg │ │ └── main.css │ ├── components │ │ ├── HelloWorld.vue │ │ ├── TheWelcome.vue │ │ ├── WelcomeItem.vue │ │ └── icons │ │ │ ├── IconCommunity.vue │ │ │ ├── IconDocumentation.vue │ │ │ ├── IconEcosystem.vue │ │ │ ├── IconSupport.vue │ │ │ └── IconTooling.vue │ └── main.js └── vite.config.js ├── 03-Quiz ├── .gitignore ├── .vscode │ └── extensions.json ├── README.md ├── index.html ├── package-lock.json ├── package.json ├── public │ └── favicon.ico ├── src │ ├── App.vue │ ├── assets │ │ ├── base.css │ │ ├── logo.svg │ │ └── main.css │ ├── components │ │ ├── Card.vue │ │ ├── Question.vue │ │ ├── QuizHeader.vue │ │ └── Result.vue │ ├── data │ │ └── quizes.json │ ├── main.js │ ├── router │ │ └── index.js │ └── views │ │ ├── QuizView.vue │ │ └── QuizesView.vue └── vite.config.js ├── 04-Animation ├── .gitignore ├── .vscode │ └── extensions.json ├── README.md ├── index.html ├── package-lock.json ├── package.json ├── public │ └── favicon.ico ├── src │ ├── App.vue │ ├── assets │ │ ├── base.css │ │ ├── logo.svg │ │ └── main.css │ ├── components │ │ ├── HelloWorld.vue │ │ ├── TheWelcome.vue │ │ ├── WelcomeItem.vue │ │ └── icons │ │ │ ├── IconCommunity.vue │ │ │ ├── IconDocumentation.vue │ │ │ ├── IconEcosystem.vue │ │ │ ├── IconSupport.vue │ │ │ └── IconTooling.vue │ ├── main.js │ ├── router │ │ └── index.js │ └── views │ │ ├── Home.vue │ │ └── Other.vue └── vite.config.js ├── 05-ShowsApp ├── .gitignore ├── .vscode │ └── extensions.json ├── README.md ├── index.html ├── package-lock.json ├── package.json ├── public │ └── favicon.ico ├── src │ ├── App.vue │ ├── assets │ │ ├── base.css │ │ ├── logo.svg │ │ └── main.css │ ├── components │ │ ├── BreakingBadCards.vue │ │ ├── BreakingBadCardsSuspense.vue │ │ ├── Card.vue │ │ ├── Hero.vue │ │ └── RickMortyCards.vue │ ├── main.js │ └── styles.css └── vite.config.js ├── 06-State ├── .gitignore ├── .vscode │ └── extensions.json ├── README.md ├── index.html ├── package-lock.json ├── package.json ├── public │ └── favicon.ico ├── src │ ├── App.vue │ ├── assets │ │ ├── base.css │ │ ├── logo.svg │ │ └── main.css │ ├── components │ │ ├── 01-PropDrilling │ │ │ ├── Child.vue │ │ │ ├── GrandChild.vue │ │ │ ├── GreatGrandChild.vue │ │ │ └── Parent.vue │ │ ├── 02-Inject │ │ │ ├── Child.vue │ │ │ ├── GrandChild.vue │ │ │ ├── GreatGrandChild.vue │ │ │ └── Parent.vue │ │ ├── 03-Composables │ │ │ ├── Child.vue │ │ │ ├── GrandChild.vue │ │ │ ├── GreatGrandChild.vue │ │ │ └── Parent.vue │ │ └── 04-Pinia │ │ │ ├── Child.vue │ │ │ ├── GrandChild.vue │ │ │ ├── GreatGrandChild.vue │ │ │ └── Parent.vue │ ├── composables │ │ └── useAges.js │ ├── main.js │ └── pinia │ │ └── useAges.js └── vite.config.js ├── 07-TypeScript ├── .gitignore ├── .vscode │ └── extensions.json ├── README.md ├── env.d.ts ├── index.html ├── package-lock.json ├── package.json ├── public │ └── favicon.ico ├── src │ ├── App.vue │ ├── Lessons │ │ ├── 01-Benefits │ │ │ └── App.vue │ │ └── 02-Lesson │ │ │ └── App.vue │ ├── assets │ │ ├── base.css │ │ ├── logo.svg │ │ └── main.css │ ├── components │ │ ├── Card.vue │ │ ├── HelloWorld.vue │ │ ├── TheWelcome.vue │ │ ├── WelcomeItem.vue │ │ └── icons │ │ │ ├── IconCommunity.vue │ │ │ ├── IconDocumentation.vue │ │ │ ├── IconEcosystem.vue │ │ │ ├── IconSupport.vue │ │ │ └── IconTooling.vue │ ├── main.ts │ └── types.ts ├── tsconfig.config.json ├── tsconfig.json └── vite.config.ts └── 08-Instagram ├── .env ├── .gitignore ├── .vscode └── extensions.json ├── README.md ├── cypress.config.js ├── cypress ├── e2e │ ├── example.cy.js │ └── jsconfig.json ├── fixtures │ └── example.json └── support │ ├── commands.js │ └── e2e.js ├── index.html ├── package-lock.json ├── package.json ├── public └── favicon.ico ├── src ├── App.vue ├── assets │ ├── base.css │ └── main.css ├── components │ ├── AuthModal.vue │ ├── Card.vue │ ├── Container.vue │ ├── ImageGallary.vue │ ├── Nav.vue │ ├── Observer.vue │ ├── Profile.vue │ ├── Timeline.vue │ ├── UploadPhotoModal.vue │ └── UserBar.vue ├── main.js ├── router │ └── index.js ├── stores │ └── users.js ├── supabase.js └── views │ ├── HomeView.vue │ └── ProfileView.vue └── vite.config.js /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/harblaith7/Vue3-Crash-Course/9570d4996cf23a0884cba10566b63cc7348f44e2/.DS_Store -------------------------------------------------------------------------------- /01-Counter/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/harblaith7/Vue3-Crash-Course/9570d4996cf23a0884cba10566b63cc7348f44e2/01-Counter/.DS_Store -------------------------------------------------------------------------------- /01-Counter/JSApp/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 |
12 |

The current count is...

13 |

8

14 | 15 | 16 |
17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /01-Counter/JSApp/index.js: -------------------------------------------------------------------------------- 1 | let count = 0; 2 | 3 | 4 | const countElement = document.getElementById("count") 5 | const countSubtractBtn = document.getElementById("subtract") 6 | const countAddBtn = document.getElementById("add") 7 | 8 | countElement.innerText = count; 9 | 10 | countSubtractBtn.addEventListener("click", () => { 11 | count--; 12 | countElement.innerText = count; 13 | }) 14 | 15 | 16 | countAddBtn.addEventListener("click", () => { 17 | count++; 18 | countElement.innerText = count; 19 | }) 20 | 21 | 22 | -------------------------------------------------------------------------------- /01-Counter/JSApp/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | width: 100vw; 3 | height: 100vh; 4 | background-color: aliceblue; 5 | display: flex; 6 | align-items: center; 7 | justify-content: center; 8 | } 9 | 10 | .container { 11 | text-align: center; 12 | } -------------------------------------------------------------------------------- /01-Counter/VueApp/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | .DS_Store 12 | dist 13 | dist-ssr 14 | coverage 15 | *.local 16 | 17 | /cypress/videos/ 18 | /cypress/screenshots/ 19 | 20 | # Editor directories and files 21 | .vscode/* 22 | !.vscode/extensions.json 23 | .idea 24 | *.suo 25 | *.ntvs* 26 | *.njsproj 27 | *.sln 28 | *.sw? 29 | -------------------------------------------------------------------------------- /01-Counter/VueApp/.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"] 3 | } 4 | -------------------------------------------------------------------------------- /01-Counter/VueApp/README.md: -------------------------------------------------------------------------------- 1 | # 01-Counter 2 | 3 | This template should help get you started developing with Vue 3 in Vite. 4 | 5 | ## Recommended IDE Setup 6 | 7 | [VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin). 8 | 9 | ## Customize configuration 10 | 11 | See [Vite Configuration Reference](https://vitejs.dev/config/). 12 | 13 | ## Project Setup 14 | 15 | ```sh 16 | npm install 17 | ``` 18 | 19 | ### Compile and Hot-Reload for Development 20 | 21 | ```sh 22 | npm run dev 23 | ``` 24 | 25 | ### Compile and Minify for Production 26 | 27 | ```sh 28 | npm run build 29 | ``` 30 | -------------------------------------------------------------------------------- /01-Counter/VueApp/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite App 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /01-Counter/VueApp/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "01-counter", 3 | "version": "0.0.0", 4 | "scripts": { 5 | "dev": "vite", 6 | "build": "vite build", 7 | "preview": "vite preview --port 4173" 8 | }, 9 | "dependencies": { 10 | "vue": "^3.2.37" 11 | }, 12 | "devDependencies": { 13 | "@vitejs/plugin-vue": "^3.0.1", 14 | "vite": "^3.0.4" 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /01-Counter/VueApp/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/harblaith7/Vue3-Crash-Course/9570d4996cf23a0884cba10566b63cc7348f44e2/01-Counter/VueApp/public/favicon.ico -------------------------------------------------------------------------------- /01-Counter/VueApp/src/App.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 17 | 18 | 32 | -------------------------------------------------------------------------------- /01-Counter/VueApp/src/assets/base.css: -------------------------------------------------------------------------------- 1 | /* color palette from */ 2 | :root { 3 | --vt-c-white: #ffffff; 4 | --vt-c-white-soft: #f8f8f8; 5 | --vt-c-white-mute: #f2f2f2; 6 | 7 | --vt-c-black: #181818; 8 | --vt-c-black-soft: #222222; 9 | --vt-c-black-mute: #282828; 10 | 11 | --vt-c-indigo: #2c3e50; 12 | 13 | --vt-c-divider-light-1: rgba(60, 60, 60, 0.29); 14 | --vt-c-divider-light-2: rgba(60, 60, 60, 0.12); 15 | --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65); 16 | --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48); 17 | 18 | --vt-c-text-light-1: var(--vt-c-indigo); 19 | --vt-c-text-light-2: rgba(60, 60, 60, 0.66); 20 | --vt-c-text-dark-1: var(--vt-c-white); 21 | --vt-c-text-dark-2: rgba(235, 235, 235, 0.64); 22 | } 23 | 24 | /* semantic color variables for this project */ 25 | :root { 26 | --color-background: var(--vt-c-white); 27 | --color-background-soft: var(--vt-c-white-soft); 28 | --color-background-mute: var(--vt-c-white-mute); 29 | 30 | --color-border: var(--vt-c-divider-light-2); 31 | --color-border-hover: var(--vt-c-divider-light-1); 32 | 33 | --color-heading: var(--vt-c-text-light-1); 34 | --color-text: var(--vt-c-text-light-1); 35 | 36 | --section-gap: 160px; 37 | } 38 | 39 | @media (prefers-color-scheme: dark) { 40 | :root { 41 | --color-background: var(--vt-c-black); 42 | --color-background-soft: var(--vt-c-black-soft); 43 | --color-background-mute: var(--vt-c-black-mute); 44 | 45 | --color-border: var(--vt-c-divider-dark-2); 46 | --color-border-hover: var(--vt-c-divider-dark-1); 47 | 48 | --color-heading: var(--vt-c-text-dark-1); 49 | --color-text: var(--vt-c-text-dark-2); 50 | } 51 | } 52 | 53 | *, 54 | *::before, 55 | *::after { 56 | box-sizing: border-box; 57 | margin: 0; 58 | position: relative; 59 | font-weight: normal; 60 | } 61 | 62 | body { 63 | min-height: 100vh; 64 | color: var(--color-text); 65 | background: var(--color-background); 66 | transition: color 0.5s, background-color 0.5s; 67 | line-height: 1.6; 68 | font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, 69 | Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; 70 | font-size: 15px; 71 | text-rendering: optimizeLegibility; 72 | -webkit-font-smoothing: antialiased; 73 | -moz-osx-font-smoothing: grayscale; 74 | } 75 | -------------------------------------------------------------------------------- /01-Counter/VueApp/src/assets/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /01-Counter/VueApp/src/assets/main.css: -------------------------------------------------------------------------------- 1 | @import "./base.css"; 2 | 3 | -------------------------------------------------------------------------------- /01-Counter/VueApp/src/components/HelloWorld.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 20 | 21 | 44 | -------------------------------------------------------------------------------- /01-Counter/VueApp/src/components/TheWelcome.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 85 | -------------------------------------------------------------------------------- /01-Counter/VueApp/src/components/WelcomeItem.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 87 | -------------------------------------------------------------------------------- /01-Counter/VueApp/src/components/icons/IconCommunity.vue: -------------------------------------------------------------------------------- 1 | 8 | -------------------------------------------------------------------------------- /01-Counter/VueApp/src/components/icons/IconDocumentation.vue: -------------------------------------------------------------------------------- 1 | 8 | -------------------------------------------------------------------------------- /01-Counter/VueApp/src/components/icons/IconEcosystem.vue: -------------------------------------------------------------------------------- 1 | 8 | -------------------------------------------------------------------------------- /01-Counter/VueApp/src/components/icons/IconSupport.vue: -------------------------------------------------------------------------------- 1 | 8 | -------------------------------------------------------------------------------- /01-Counter/VueApp/src/components/icons/IconTooling.vue: -------------------------------------------------------------------------------- 1 | 2 | 20 | -------------------------------------------------------------------------------- /01-Counter/VueApp/src/main.js: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue' 2 | import App from './App.vue' 3 | 4 | import './assets/main.css' 5 | 6 | createApp(App).mount('#app') 7 | -------------------------------------------------------------------------------- /01-Counter/VueApp/vite.config.js: -------------------------------------------------------------------------------- 1 | import { fileURLToPath, URL } from 'node:url' 2 | 3 | import { defineConfig } from 'vite' 4 | import vue from '@vitejs/plugin-vue' 5 | 6 | // https://vitejs.dev/config/ 7 | export default defineConfig({ 8 | plugins: [vue()], 9 | resolve: { 10 | alias: { 11 | '@': fileURLToPath(new URL('./src', import.meta.url)) 12 | } 13 | } 14 | }) 15 | -------------------------------------------------------------------------------- /02-Notes/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | .DS_Store 12 | dist 13 | dist-ssr 14 | coverage 15 | *.local 16 | 17 | /cypress/videos/ 18 | /cypress/screenshots/ 19 | 20 | # Editor directories and files 21 | .vscode/* 22 | !.vscode/extensions.json 23 | .idea 24 | *.suo 25 | *.ntvs* 26 | *.njsproj 27 | *.sln 28 | *.sw? 29 | -------------------------------------------------------------------------------- /02-Notes/.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"] 3 | } 4 | -------------------------------------------------------------------------------- /02-Notes/README.md: -------------------------------------------------------------------------------- 1 | # 02-Quiz 2 | 3 | This template should help get you started developing with Vue 3 in Vite. 4 | 5 | ## Recommended IDE Setup 6 | 7 | [VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin). 8 | 9 | ## Customize configuration 10 | 11 | See [Vite Configuration Reference](https://vitejs.dev/config/). 12 | 13 | ## Project Setup 14 | 15 | ```sh 16 | npm install 17 | ``` 18 | 19 | ### Compile and Hot-Reload for Development 20 | 21 | ```sh 22 | npm run dev 23 | ``` 24 | 25 | ### Compile and Minify for Production 26 | 27 | ```sh 28 | npm run build 29 | ``` 30 | -------------------------------------------------------------------------------- /02-Notes/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite App 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /02-Notes/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "02-quiz", 3 | "version": "0.0.0", 4 | "scripts": { 5 | "dev": "vite", 6 | "build": "vite build", 7 | "preview": "vite preview --port 4173" 8 | }, 9 | "dependencies": { 10 | "vue": "^3.2.37" 11 | }, 12 | "devDependencies": { 13 | "@vitejs/plugin-vue": "^3.0.1", 14 | "vite": "^3.0.4" 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /02-Notes/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/harblaith7/Vue3-Crash-Course/9570d4996cf23a0884cba10566b63cc7348f44e2/02-Notes/public/favicon.ico -------------------------------------------------------------------------------- /02-Notes/src/App.vue: -------------------------------------------------------------------------------- 1 | 24 | 25 |