├── .gitignore ├── README.md ├── index.html ├── src └── main.js └── vue3 ├── .env ├── .gitignore ├── README.md ├── babel.config.js ├── package-lock.json ├── package.json ├── postcss.config.js ├── public ├── _redirects ├── favicon.ico └── index.html ├── src ├── App.vue ├── assets │ └── style.css ├── components │ ├── AppHeader.vue │ ├── Login │ │ └── GoogleLogin.vue │ ├── LoginModal.vue │ ├── Modal.vue │ └── UserCrud │ │ └── Create.vue ├── main.js ├── middleware │ └── auth.js ├── pages │ ├── Calculator.vue │ ├── Calendar.vue │ ├── Chat.vue │ ├── DcHeros.vue │ ├── Home.vue │ ├── Markdown.vue │ ├── ReuseableModal.vue │ ├── Slider.vue │ ├── Tensorflow.vue │ └── UserCrud.vue ├── plugins │ └── axios.js ├── router.js ├── store │ └── index.js └── utilities │ ├── composition │ ├── useDebounce.js │ └── useWindowEvent.js │ ├── firebase.js │ └── mixins │ └── debounce.js └── tailwind.config.js /.gitignore: -------------------------------------------------------------------------------- 1 | vue3/node_modules -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Vue 3 Full Course - Build 10 Apps in 10 Hours 2 | 3 | ## Teachnologies Used 4 | 5 | 1. Tensorflow 6 | 2. Netlify 7 | 3. Vue3 8 | 4. Vue Router v4 9 | 5. Vuex v4 10 | 6. Firebase Authentication 11 | 7. Firebase Real Time Database 12 | 13 | ## Demo 👇 14 | 15 | [Netlify Deployed Project](https://vue3-full-course.netlify.app) 16 | 17 | ## 10 Apps Build 18 | 19 | 1. 🔷 DcHeros 20 | 1. v-for 21 | 2. v-bind 22 | 3. v-model 23 | 4. v-on 24 | 5. methods 25 | 6. computed properties ( getters & setters) 26 | 7. vue components 27 | 2. 🔷 Calendar 28 | 1. Javascript Date 29 | 2. Vue Router 30 | 3. 🔷 Markdown 31 | 1. Using External Library 32 | 2. Vue Mixins 33 | 4. 🔷 Slider 34 | 1. Vue Transition & Animation 35 | 2. virtual DOM 36 | 3. lifecycle hooks 37 | 5. 🔷 Login Page 38 | 1. Create Modal 39 | 2. Vue Custom Events Emitting 40 | 3. Form Handling 41 | 4. firebase authentication 42 | 5. loading effect 43 | 6. Template Refs 44 | 7. component props 45 | 8. firebase google login 46 | 9. Refactoring with component 47 | 10. vue3 teleport 48 | 6. 🔷 Calculator 49 | 1. Composition API 50 | 2. window event listener 51 | 3. resuable composition api 52 | 7. 🔷 ReuseableModal 53 | 1. slots 54 | 2. named slots 55 | 8. 🔷 Chat 56 | 1. Firebase Realtime Database 57 | 2. vuex v4 58 | 3. Custom Router middleware 59 | 9. 🔷 UserCrud 60 | 1. using axios 61 | 2. external API 62 | 3. reactive vue3 api 63 | 4. pagination 64 | 5. envirnment variable (.env file) 65 | 10. 🔷 Tensorflow Object Detection 66 | 1. Using Tensorflow with Vue 67 | 2. Device Camera Open 68 | 3. Working with Canvas 69 | 70 | ### Youtube Tutorial Link 71 | 72 | [YouTube Link](https://youtube.com/bitfumes) 73 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Vue 3 tutorial 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | const template = `
2 |

{{name}}

3 |
`; 4 | 5 | const data = function data() { 6 | return { 7 | title: "Vue3 Tutorial", 8 | name: "Sarthak", 9 | }; 10 | }; 11 | const App = { data, template }; 12 | 13 | Vue.createApp(App).mount("#vue-app"); 14 | -------------------------------------------------------------------------------- /vue3/.env: -------------------------------------------------------------------------------- 1 | VUE_APP_API_URL=https://crudcrud.com/api/a03aec5665f14741ba3da0c07160ee81 -------------------------------------------------------------------------------- /vue3/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | 6 | # local env files 7 | .env.local 8 | .env.*.local 9 | 10 | # Log files 11 | npm-debug.log* 12 | yarn-debug.log* 13 | yarn-error.log* 14 | pnpm-debug.log* 15 | 16 | # Editor directories and files 17 | .idea 18 | .vscode 19 | *.suo 20 | *.ntvs* 21 | *.njsproj 22 | *.sln 23 | *.sw? 24 | -------------------------------------------------------------------------------- /vue3/README.md: -------------------------------------------------------------------------------- 1 | # Vue 3 Full Course - Build 10 Apps in 10 Hours 2 | 3 | ## Teachnologies Used 4 | 5 | 1. Tensorflow 6 | 2. Netlify 7 | 3. Vue3 8 | 4. Vue Router v4 9 | 5. Vuex v4 10 | 6. Firebase Authentication 11 | 7. Firebase Real Time Database 12 | 13 | ## Demo 👇 14 | 15 | [Netlify Deployed Project](https://vue3-full-course.netlify.app) 16 | 17 | ## 10 Apps Build 18 | 19 | 1. 🔷 DcHeros 20 | 1. v-for 21 | 2. v-bind 22 | 3. v-model 23 | 4. v-on 24 | 5. methods 25 | 6. computed properties ( getters & setters) 26 | 7. vue components 27 | 2. 🔷 Calendar 28 | 1. Javascript Date 29 | 2. Vue Router 30 | 3. 🔷 Markdown 31 | 1. Using External Library 32 | 2. Vue Mixins 33 | 4. 🔷 Slider 34 | 1. Vue Transition & Animation 35 | 2. virtual DOM 36 | 3. lifecycle hooks 37 | 5. 🔷 Login Page 38 | 1. Create Modal 39 | 2. Vue Custom Events Emitting 40 | 3. Form Handling 41 | 4. firebase authentication 42 | 5. loading effect 43 | 6. Template Refs 44 | 7. component props 45 | 8. firebase google login 46 | 9. Refactoring with component 47 | 10. vue3 teleport 48 | 6. 🔷 Calculator 49 | 1. Composition API 50 | 2. window event listener 51 | 3. resuable composition api 52 | 7. 🔷 ReuseableModal 53 | 1. slots 54 | 2. named slots 55 | 8. 🔷 Chat 56 | 1. Firebase Realtime Database 57 | 2. vuex v4 58 | 3. Custom Router middleware 59 | 9. 🔷 UserCrud 60 | 1. using axios 61 | 2. external API 62 | 3. reactive vue3 api 63 | 4. pagination 64 | 5. envirnment variable (.env file) 65 | 10. 🔷 Tensorflow Object Detection 66 | 1. Using Tensorflow with Vue 67 | 2. Device Camera Open 68 | 3. Working with Canvas 69 | 70 | ### Youtube Tutorial Link 71 | 72 | [YouTube Link](https://youtube.com/bitfumes) 73 | -------------------------------------------------------------------------------- /vue3/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/cli-plugin-babel/preset' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /vue3/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue3", 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 | "@tensorflow-models/coco-ssd": "^2.1.0", 12 | "@tensorflow/tfjs-backend-cpu": "^2.4.0", 13 | "@tensorflow/tfjs-backend-webgl": "^2.4.0", 14 | "@tensorflow/tfjs-converter": "^2.4.0", 15 | "@tensorflow/tfjs-core": "^2.4.0", 16 | "axios": "^0.20.0", 17 | "core-js": "^3.6.5", 18 | "firebase": "^7.22.0", 19 | "marked": "^1.2.0", 20 | "tailwindcss": "^1.8.10", 21 | "vue": "^3.0.0-0", 22 | "vue-router": "^4.0.0-beta.13", 23 | "vuex": "^4.0.0-beta.4" 24 | }, 25 | "devDependencies": { 26 | "@vue/cli-plugin-babel": "~4.5.0", 27 | "@vue/cli-plugin-eslint": "~4.5.0", 28 | "@vue/cli-service": "~4.5.0", 29 | "@vue/compiler-sfc": "^3.0.0-0", 30 | "babel-eslint": "^10.1.0", 31 | "eslint": "^6.7.2", 32 | "eslint-plugin-vue": "^7.0.0-0" 33 | }, 34 | "eslintConfig": { 35 | "root": true, 36 | "env": { 37 | "node": true 38 | }, 39 | "extends": [ 40 | "plugin:vue/vue3-essential", 41 | "eslint:recommended" 42 | ], 43 | "parserOptions": { 44 | "parser": "babel-eslint" 45 | }, 46 | "rules": {} 47 | }, 48 | "browserslist": [ 49 | "> 1%", 50 | "last 2 versions", 51 | "not dead" 52 | ] 53 | } 54 | -------------------------------------------------------------------------------- /vue3/postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: [require("tailwindcss"), require("autoprefixer")], 3 | }; 4 | -------------------------------------------------------------------------------- /vue3/public/_redirects: -------------------------------------------------------------------------------- 1 | /* /index.html 200 -------------------------------------------------------------------------------- /vue3/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bitfumes/vue3-for-beginners/322edcb219d39ccfb7470cd18073aa6663a84e3a/vue3/public/favicon.ico -------------------------------------------------------------------------------- /vue3/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | <%= htmlWebpackPlugin.options.title %> 9 | 10 | 11 | 18 |
19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /vue3/src/App.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /vue3/src/assets/style.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | -------------------------------------------------------------------------------- /vue3/src/components/AppHeader.vue: -------------------------------------------------------------------------------- 1 | 19 | 20 | 55 | 56 | 57 | -------------------------------------------------------------------------------- /vue3/src/components/Login/GoogleLogin.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /vue3/src/components/LoginModal.vue: -------------------------------------------------------------------------------- 1 | 51 | 52 | 96 | 97 | 98 | -------------------------------------------------------------------------------- /vue3/src/components/Modal.vue: -------------------------------------------------------------------------------- 1 | 21 | 22 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /vue3/src/components/UserCrud/Create.vue: -------------------------------------------------------------------------------- 1 | 50 | 51 | 80 | 81 | 82 | -------------------------------------------------------------------------------- /vue3/src/main.js: -------------------------------------------------------------------------------- 1 | import { createApp } from "vue"; 2 | import App from "./App.vue"; 3 | import "./assets/style.css"; 4 | import router from "./router"; 5 | import store from "./store/index"; 6 | 7 | const app = createApp(App); 8 | app.use(router); 9 | app.use(store); 10 | app.mount("#app"); 11 | -------------------------------------------------------------------------------- /vue3/src/middleware/auth.js: -------------------------------------------------------------------------------- 1 | export default function(next, store) { 2 | if (!store.state.isLoggedIn) { 3 | next("/"); 4 | store.commit("setLoginModal", true); 5 | } else { 6 | next(); 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /vue3/src/pages/Calculator.vue: -------------------------------------------------------------------------------- 1 | 114 | 115 | 176 | 177 | 178 | -------------------------------------------------------------------------------- /vue3/src/pages/Calendar.vue: -------------------------------------------------------------------------------- 1 | 41 | 42 | 95 | 96 | 97 | -------------------------------------------------------------------------------- /vue3/src/pages/Chat.vue: -------------------------------------------------------------------------------- 1 | 28 | 29 | 60 | 61 | 62 | -------------------------------------------------------------------------------- /vue3/src/pages/DcHeros.vue: -------------------------------------------------------------------------------- 1 | 32 | 33 | 70 | 71 | 72 | -------------------------------------------------------------------------------- /vue3/src/pages/Home.vue: -------------------------------------------------------------------------------- 1 | 45 | 46 | 144 | 145 | 146 | -------------------------------------------------------------------------------- /vue3/src/pages/Markdown.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | 45 | 46 | 47 | -------------------------------------------------------------------------------- /vue3/src/pages/ReuseableModal.vue: -------------------------------------------------------------------------------- 1 | 38 | 39 | 52 | 53 | 54 | -------------------------------------------------------------------------------- /vue3/src/pages/Slider.vue: -------------------------------------------------------------------------------- 1 | 38 | 39 | 64 | 65 | 80 | -------------------------------------------------------------------------------- /vue3/src/pages/Tensorflow.vue: -------------------------------------------------------------------------------- 1 | 59 | 60 | 125 | 126 | 127 | -------------------------------------------------------------------------------- /vue3/src/pages/UserCrud.vue: -------------------------------------------------------------------------------- 1 | 68 | 69 | 108 | 109 | 110 | -------------------------------------------------------------------------------- /vue3/src/plugins/axios.js: -------------------------------------------------------------------------------- 1 | import axios from "axios"; 2 | axios.defaults.baseURL = process.env.VUE_APP_API_URL; 3 | export default axios; 4 | -------------------------------------------------------------------------------- /vue3/src/router.js: -------------------------------------------------------------------------------- 1 | import { createRouter, createWebHistory } from "vue-router"; 2 | import DcHeros from "./pages/DcHeros"; 3 | import Calendar from "./pages/Calendar"; 4 | import Home from "./pages/Home"; 5 | import Markdown from "./pages/Markdown"; 6 | import Slider from "./pages/Slider"; 7 | import Calculator from "./pages/Calculator"; 8 | import ReuseableModal from "./pages/ReuseableModal"; 9 | import UserCrud from "./pages/UserCrud"; 10 | import Chat from "./pages/Chat"; 11 | import Tensorflow from "./pages/Tensorflow"; 12 | import store from "./store/index"; 13 | 14 | const routes = [ 15 | { path: "/", component: Home }, 16 | { path: "/dc-heros", component: DcHeros }, 17 | { path: "/calendar", component: Calendar }, 18 | { path: "/markdown", component: Markdown }, 19 | { path: "/slider-carousel", component: Slider }, 20 | { path: "/calculator", component: Calculator, meta: { middleware: "auth" } }, 21 | { path: "/resuseable-modal", component: ReuseableModal }, 22 | { 23 | path: "/chat", 24 | component: Chat, 25 | meta: { middleware: "auth" }, 26 | }, 27 | { path: "/user-crud", component: UserCrud }, 28 | { path: "/tensorflow", component: Tensorflow }, 29 | ]; 30 | 31 | const router = createRouter({ 32 | history: createWebHistory(), 33 | routes, 34 | }); 35 | 36 | router.beforeEach((to, _, next) => { 37 | if (to.meta.middleware) { 38 | const middleware = require(`./middleware/${to.meta.middleware}`); 39 | if (middleware) { 40 | middleware.default(next, store); 41 | } else { 42 | next(); 43 | } 44 | } else { 45 | next(); 46 | } 47 | }); 48 | 49 | export default router; 50 | -------------------------------------------------------------------------------- /vue3/src/store/index.js: -------------------------------------------------------------------------------- 1 | import { createStore } from "vuex"; 2 | 3 | const store = createStore({ 4 | state() { 5 | return { 6 | isLoggedIn: false, 7 | authUser: {}, 8 | isLoginOpen: false, 9 | }; 10 | }, 11 | mutations: { 12 | setIsLoggedIn(state, payload) { 13 | state.isLoggedIn = payload; 14 | }, 15 | setAuthUser(state, payload) { 16 | state.authUser = payload; 17 | }, 18 | setLoginModal(state, payload) { 19 | state.isLoginOpen = payload; 20 | }, 21 | }, 22 | }); 23 | 24 | export default store; 25 | -------------------------------------------------------------------------------- /vue3/src/utilities/composition/useDebounce.js: -------------------------------------------------------------------------------- 1 | import { ref } from "vue"; 2 | export default function useDebounce() { 3 | const timeout = ref(""); 4 | 5 | function debounce(func, wait = 1000) { 6 | clearTimeout(timeout.value); 7 | timeout.value = setTimeout(func, wait); 8 | } 9 | 10 | return debounce; 11 | } 12 | -------------------------------------------------------------------------------- /vue3/src/utilities/composition/useWindowEvent.js: -------------------------------------------------------------------------------- 1 | import { onMounted, onUnmounted } from "vue"; 2 | 3 | export default function useWindowEvent(eventName, handleEvent) { 4 | onMounted(() => window.addEventListener(eventName, handleEvent)); 5 | 6 | onUnmounted(() => window.removeEventListener(eventName, handleEvent)); 7 | } 8 | -------------------------------------------------------------------------------- /vue3/src/utilities/firebase.js: -------------------------------------------------------------------------------- 1 | import * as firebase from "firebase/app"; 2 | import "firebase/auth"; 3 | import "firebase/database"; 4 | 5 | const firebaseConfig = { 6 | apiKey: "AIzaSyDCdgb5YGEU6E__VENtW5IJLPPEiM6ZZJ8", 7 | authDomain: "vue-full-course.firebaseapp.com", 8 | databaseURL: "https://vue-full-course.firebaseio.com", 9 | projectId: "vue-full-course", 10 | storageBucket: "vue-full-course.appspot.com", 11 | messagingSenderId: "164889229979", 12 | appId: "1:164889229979:web:bffd7395881db11f3fe43e", 13 | }; 14 | 15 | firebase.initializeApp(firebaseConfig); 16 | const db = firebase.database(); 17 | export const chatsRef = db.ref("chats"); 18 | 19 | export default firebase; 20 | -------------------------------------------------------------------------------- /vue3/src/utilities/mixins/debounce.js: -------------------------------------------------------------------------------- 1 | export default { 2 | data() { 3 | return { 4 | timeout: "", 5 | }; 6 | }, 7 | methods: { 8 | debounce(func, wait = 1000) { 9 | console.log("i am from mixin"); 10 | clearTimeout(this.timeout); 11 | this.timeout = setTimeout(func, wait); 12 | }, 13 | }, 14 | }; 15 | -------------------------------------------------------------------------------- /vue3/tailwind.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | future: { 3 | // removeDeprecatedGapUtilities: true, 4 | // purgeLayersByDefault: true, 5 | }, 6 | purge: [], 7 | theme: { 8 | extend: {}, 9 | }, 10 | variants: {}, 11 | plugins: [], 12 | } 13 | --------------------------------------------------------------------------------