├── .gitignore
├── vue3
    ├── public
    │   ├── _redirects
    │   ├── favicon.ico
    │   └── index.html
    ├── .env
    ├── src
    │   ├── assets
    │   │   └── style.css
    │   ├── plugins
    │   │   └── axios.js
    │   ├── middleware
    │   │   └── auth.js
    │   ├── main.js
    │   ├── utilities
    │   │   ├── composition
    │   │   │   ├── useWindowEvent.js
    │   │   │   └── useDebounce.js
    │   │   ├── mixins
    │   │   │   └── debounce.js
    │   │   └── firebase.js
    │   ├── store
    │   │   └── index.js
    │   ├── components
    │   │   ├── Login
    │   │   │   └── GoogleLogin.vue
    │   │   ├── Modal.vue
    │   │   ├── AppHeader.vue
    │   │   ├── UserCrud
    │   │   │   └── Create.vue
    │   │   └── LoginModal.vue
    │   ├── App.vue
    │   ├── pages
    │   │   ├── Markdown.vue
    │   │   ├── ReuseableModal.vue
    │   │   ├── Chat.vue
    │   │   ├── DcHeros.vue
    │   │   ├── Slider.vue
    │   │   ├── Calendar.vue
    │   │   ├── UserCrud.vue
    │   │   ├── Tensorflow.vue
    │   │   ├── Home.vue
    │   │   └── Calculator.vue
    │   └── router.js
    ├── babel.config.js
    ├── postcss.config.js
    ├── tailwind.config.js
    ├── .gitignore
    ├── package.json
    └── README.md
├── src
    └── main.js
├── index.html
└── README.md


/.gitignore:
--------------------------------------------------------------------------------
1 | vue3/node_modules


--------------------------------------------------------------------------------
/vue3/public/_redirects:
--------------------------------------------------------------------------------
1 | /*    /index.html   200


--------------------------------------------------------------------------------
/vue3/.env:
--------------------------------------------------------------------------------
1 | VUE_APP_API_URL=https://crudcrud.com/api/a03aec5665f14741ba3da0c07160ee81


--------------------------------------------------------------------------------
/vue3/src/assets/style.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 | 


--------------------------------------------------------------------------------
/vue3/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/cli-plugin-babel/preset'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/vue3/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bitfumes/vue3-for-beginners/HEAD/vue3/public/favicon.ico


--------------------------------------------------------------------------------
/vue3/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: [require("tailwindcss"), require("autoprefixer")],
3 | };
4 | 


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


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | const template = `<div>
 2 | <h1>{{name}}</h1>
 3 | </div>`;
 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/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/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/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/.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/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 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <title>Vue 3 tutorial</title>
 7 |     <script src="https://unpkg.com/vue@next"></script>
 8 |   </head>
 9 |   <body>
10 |     <div id="vue-app"></div>
11 |     <script src="src/main.js"></script>
12 |   </body>
13 | </html>
14 | 


--------------------------------------------------------------------------------
/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/components/Login/GoogleLogin.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <section class="mt-5 text-center">
 3 |     <button class="border px-2 rounded" @click="loginWithGoogle">
 4 |       Login With Google
 5 |     </button>
 6 |   </section>
 7 | </template>
 8 | 
 9 | <script>
10 | import firebase from "../../utilities/firebase";
11 | export default {
12 |   methods: {
13 |     loginWithGoogle() {
14 |       var provider = new firebase.auth.GoogleAuthProvider();
15 |       firebase
16 |         .auth()
17 |         .signInWithPopup(provider)
18 |         .then(() => {
19 |           this.$emit("close-login-from-google");
20 |         });
21 |     },
22 |   },
23 | };
24 | </script>
25 | 
26 | <style></style>
27 | 


--------------------------------------------------------------------------------
/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/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0" />
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
 8 |     <title><%= htmlWebpackPlugin.options.title %></title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong
13 |         >We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work
14 |         properly without JavaScript enabled. Please enable it to
15 |         continue.</strong
16 |       >
17 |     </noscript>
18 |     <div id="app"></div>
19 |     <!-- built files will be auto injected -->
20 |   </body>
21 | </html>
22 | 


--------------------------------------------------------------------------------
/vue3/src/components/Modal.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <section
 3 |     @click="close"
 4 |     class="z-20 h-screen w-screen bg-gray-500 fixed top-0 left-0 opacity-50"
 5 |   ></section>
 6 |   <div class="absolute inset-0">
 7 |     <div class="flex h-full">
 8 |       <div class="z-30 m-auto bg-white p-2 rounded shadow w-10/12 md:w-1/3">
 9 |         <div class="p-2 border">
10 |           <h1 class="text-2xl">
11 |             <slot name="title"></slot>
12 |           </h1>
13 |           <main>
14 |             <slot name="body"></slot>
15 |           </main>
16 |         </div>
17 |       </div>
18 |     </div>
19 |   </div>
20 | </template>
21 | 
22 | <script>
23 | export default {
24 |   setup(_, { emit }) {
25 |     function close() {
26 |       emit("close");
27 |     }
28 | 
29 |     return { close };
30 |   },
31 | };
32 | </script>
33 | 
34 | <style></style>
35 | 


--------------------------------------------------------------------------------
/vue3/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <AppHeader />
 3 |   <div class="w-full flex">
 4 |     <router-view></router-view>
 5 |   </div>
 6 |   <teleport to="body">
 7 |     <LoginModal />
 8 |   </teleport>
 9 | </template>
10 | 
11 | <script>
12 | import AppHeader from "./components/AppHeader";
13 | import LoginModal from "./components/LoginModal";
14 | import firebase from "./utilities/firebase";
15 | 
16 | export default {
17 |   mounted() {
18 |     firebase.auth().onAuthStateChanged((user) => {
19 |       if (user) {
20 |         this.$store.commit("setIsLoggedIn", true);
21 |         this.$store.commit("setLoginModal", false);
22 |         this.$store.commit("setAuthUser", user);
23 |       } else {
24 |         this.$store.commit("setIsLoggedIn", false);
25 |         this.$store.commit("setAuthUser", {});
26 |       }
27 |     });
28 |   },
29 |   components: { AppHeader, LoginModal },
30 | };
31 | </script>
32 | 
33 | <style></style>
34 | 


--------------------------------------------------------------------------------
/vue3/src/pages/Markdown.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="flex flex-wrap w-full">
 3 |     <h1 class="w-full text-center text-3xl my-4">Markdown App</h1>
 4 |     <section class="flex m-auto w-10/12 h-screen">
 5 |       <article class="w-1/2 border">
 6 |         <textarea
 7 |           ref="markdownTextArea"
 8 |           class="w-full h-full"
 9 |           :value="text"
10 |           @input="update"
11 |         ></textarea>
12 |       </article>
13 |       <article class="w-1/2 border bg-gray-100" v-html="markedText"></article>
14 |     </section>
15 |   </div>
16 | </template>
17 | 
18 | <script>
19 | import marked from "marked";
20 | import useDebounce from "../utilities/composition/useDebounce";
21 | export default {
22 |   data() {
23 |     return {
24 |       text: "**this is markdown app**",
25 |       debounce: "",
26 |     };
27 |   },
28 |   computed: {
29 |     markedText() {
30 |       return marked(this.text);
31 |     },
32 |   },
33 |   methods: {
34 |     update(e) {
35 |       const task = () => (this.text = e.target.value);
36 |       this.debounce(task, 500);
37 |     },
38 |   },
39 |   mounted() {
40 |     this.debounce = useDebounce();
41 |     this.$refs.markdownTextArea.focus();
42 |   },
43 | };
44 | </script>
45 | 
46 | <style></style>
47 | 


--------------------------------------------------------------------------------
/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/src/pages/ReuseableModal.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <section class="flex flex-wrap w-full">
 3 |     <div class="m-auto">
 4 |       <h1 class="text-2xl my-5">Re-useable Modal</h1>
 5 | 
 6 |       <Modal v-if="isModal1Open" @close="isModal1Open = false">
 7 |         <template #title>
 8 |           Modal 1
 9 |         </template>
10 |         <template #body>
11 |           <p>This is the body slot</p>
12 |         </template>
13 |       </Modal>
14 |       <button
15 |         class="border rounded px-2 mx-4 bg-blue-500 text-white"
16 |         @click="isModal1Open = true"
17 |       >
18 |         Modal 1
19 |       </button>
20 | 
21 |       <Modal v-if="isModal2Open" @close="isModal2Open = false">
22 |         <template #title>
23 |           Modal 2
24 |         </template>
25 |         <template #body>
26 |           <p>This is the body slot for modal 2</p>
27 |         </template>
28 |       </Modal>
29 |       <button
30 |         class="border rounded px-2 mx-4 bg-blue-500 text-white"
31 |         @click="isModal2Open = true"
32 |       >
33 |         Modal 2
34 |       </button>
35 |     </div>
36 |   </section>
37 | </template>
38 | 
39 | <script>
40 | import Modal from "../components/Modal";
41 | import { ref } from "vue";
42 | 
43 | export default {
44 |   components: { Modal },
45 |   setup() {
46 |     const isModal1Open = ref(false);
47 |     const isModal2Open = ref(false);
48 |     return { isModal1Open, isModal2Open };
49 |   },
50 | };
51 | </script>
52 | 
53 | <style></style>
54 | 


--------------------------------------------------------------------------------
/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/components/AppHeader.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <nav
 3 |     class="w-full bg-gradient-to-r from-blue-800 to-blue-600 text-white px-4 py-5"
 4 |   >
 5 |     <router-link class="md:hidden" to="/">Home</router-link>
 6 |     <router-link
 7 |       v-for="item in list"
 8 |       :key="item.to"
 9 |       class="mx-2 hidden md:inline-block"
10 |       :to="item.to"
11 |       >{{ item.title }}</router-link
12 |     >
13 |     <button v-if="isLoggedIn" class="mx-2" @click="logout">Logout</button>
14 |     <button v-else class="mx-2" @click="openLogin">
15 |       Login
16 |     </button>
17 |   </nav>
18 | </template>
19 | 
20 | <script>
21 | import firebase from "../utilities/firebase";
22 | export default {
23 |   data() {
24 |     return {
25 |       list: [
26 |         { title: "Dc Heros", to: "/dc-heros" },
27 |         { title: "Calendar", to: "/calendar" },
28 |         { title: "Markdown", to: "/markdown" },
29 |         { title: "Slider", to: "/slider-carousel" },
30 |         { title: "Calculator", to: "/calculator" },
31 |         { title: "Modal", to: "/resuseable-modal" },
32 |         { title: "Chat", to: "/chat" },
33 |         { title: "User Crud", to: "/user-crud" },
34 |         { title: "Tensorflow", to: "/tensorflow" },
35 |       ],
36 |     };
37 |   },
38 |   computed: {
39 |     isLoggedIn() {
40 |       return this.$store.state.isLoggedIn;
41 |     },
42 |   },
43 |   methods: {
44 |     logout() {
45 |       firebase.auth().signOut();
46 |       // .then((res) => {})
47 |       // .catch((e) => {});
48 |     },
49 |     openLogin() {
50 |       this.$store.commit("setLoginModal", true);
51 |     },
52 |   },
53 | };
54 | </script>
55 | 
56 | <style></style>
57 | 


--------------------------------------------------------------------------------
/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/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/src/pages/Chat.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <section class="flex w-full">
 3 |     <div class="m-auto w-full flex flex-wrap justify-center">
 4 |       <h1 class="text-center text-3xl my-4 w-full">Real Time Chat</h1>
 5 |       <div class="border rounded-lg w-10/12 md:w-4/12">
 6 |         <div class="h-64 p-2">
 7 |           <div
 8 |             v-for="chat in state.chats"
 9 |             :key="chat.message"
10 |             class="w-full"
11 |             :class="chat.userId === userId ? 'text-right' : ''"
12 |           >
13 |             {{ chat.message }}
14 |           </div>
15 |         </div>
16 |         <div class="h-8 p-2">
17 |           <input
18 |             v-model="state.message"
19 |             placeholder="Start Typing..."
20 |             class="p-1 border rounded shadow w-full"
21 |             @keydown.enter="addMessage"
22 |           />
23 |         </div>
24 |       </div>
25 |     </div>
26 |   </section>
27 | </template>
28 | 
29 | <script>
30 | import { computed, onMounted, reactive } from "vue";
31 | import { chatsRef } from "../utilities/firebase";
32 | import { useStore } from "vuex";
33 | 
34 | export default {
35 |   setup() {
36 |     const state = reactive({
37 |       chats: [],
38 |       message: "",
39 |     });
40 | 
41 |     const store = useStore();
42 |     const userId = computed(() => store.state.authUser.uid);
43 | 
44 |     onMounted(async () => {
45 |       chatsRef.on("child_added", (snapshot) => {
46 |         state.chats.push({ key: snapshot.key, ...snapshot.val() });
47 |       });
48 |     });
49 | 
50 |     function addMessage() {
51 |       const newChat = chatsRef.push();
52 |       newChat.set({ userId: userId.value, message: state.message });
53 |       state.message = "";
54 |     }
55 | 
56 |     return { state, addMessage, userId };
57 |   },
58 | };
59 | </script>
60 | 
61 | <style></style>
62 | 


--------------------------------------------------------------------------------
/vue3/src/pages/DcHeros.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="m-auto">
 3 |     <h1 class="text-3xl text-center my-4">Dc Heros {{ herosCount }}</h1>
 4 |     <ul class="border rounded p-2">
 5 |       <li
 6 |         class="flex justify-between"
 7 |         v-for="(hero, index) in dcHeros"
 8 |         :key="hero.name"
 9 |       >
10 |         <div>
11 |           {{ hero.name }}
12 |         </div>
13 |         <button v-on:click="remove(index)">x</button>
14 |       </li>
15 |     </ul>
16 |     <form class="mt-10" @submit.prevent="addHero">
17 |       <input
18 |         class="border rounded px-2"
19 |         v-model="newHero"
20 |         placeholder="Type Hero Name Here"
21 |         ref="newHeroRef"
22 |       />
23 |       <button
24 |         class="border rounded bg-gradient-to-r from-red-700 to-pink-500 text-white ml-2 px-2"
25 |         type="submit"
26 |       >
27 |         Add Hero
28 |       </button>
29 |     </form>
30 |   </div>
31 | </template>
32 | 
33 | <script>
34 | import { computed, onMounted, ref } from "vue";
35 | export default {
36 |   setup() {
37 |     const newHeroRef = ref("");
38 |     const newHero = ref("");
39 |     const dcHeros = ref([
40 |       { name: "SuperGirl" },
41 |       { name: "Flash" },
42 |       { name: "Batman" },
43 |       { name: "Arrow" },
44 |       { name: "SuperMan" },
45 |     ]);
46 | 
47 |     onMounted(() => {
48 |       newHeroRef.value.focus();
49 |     });
50 | 
51 |     const herosCount = computed({
52 |       get: () => dcHeros.value.length,
53 |     });
54 | 
55 |     function remove(index) {
56 |       dcHeros.value = dcHeros.value.filter((hero, i) => i != index);
57 |     }
58 | 
59 |     function addHero() {
60 |       if (newHero.value !== "") {
61 |         dcHeros.value.unshift({ name: newHero.value });
62 |         newHero.value = "";
63 |       }
64 |     }
65 | 
66 |     return { dcHeros, newHero, remove, addHero, newHeroRef, herosCount };
67 |   },
68 | };
69 | </script>
70 | 
71 | <style></style>
72 | 


--------------------------------------------------------------------------------
/vue3/src/pages/Slider.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="flex flex-wrap w-full relative">
 3 |     <div class="absolute w-full" v-for="(color, index) in sliders" :key="color">
 4 |       <transition name="fade">
 5 |         <div
 6 |           v-if="currentSlide == index"
 7 |           :class="color"
 8 |           style="height:350px"
 9 |         ></div>
10 |       </transition>
11 |     </div>
12 |     <div class="w-full" style="height:340px">
13 |       <div class="absolute bottom-0 w-full flex justify-center">
14 |         <div
15 |           v-for="(slider, index) in sliders"
16 |           :key="slider"
17 |           @click="makeActive(index)"
18 |           :class="currentSlide == index ? 'bg-gray-700' : 'bg-gray-300'"
19 |           class="w-4 h-4 mx-2 rounded-full cursor-pointer shadow-md"
20 |         ></div>
21 |       </div>
22 |     </div>
23 |     <!-- <div class="my-10 flex w-full">
24 |       <div class="m-auto">
25 |         <transition name="fade">
26 |           <h1 v-if="isTitleShowing">Slider Carousel</h1>
27 |         </transition>
28 |         <button
29 |           @click="isTitleShowing = !isTitleShowing"
30 |           class="px-2 rounded border"
31 |         >
32 |           Toggle Text
33 |         </button>
34 |       </div>
35 |     </div> -->
36 |   </div>
37 | </template>
38 | 
39 | <script>
40 | export default {
41 |   data() {
42 |     return {
43 |       currentSlide: 1,
44 |       sliders: ["bg-teal-600", "bg-blue-600", "bg-yellow-600"],
45 |       interval: "",
46 |       isTitleShowing: true,
47 |     };
48 |   },
49 |   methods: {
50 |     makeActive(index) {
51 |       this.currentSlide = index;
52 |     },
53 |   },
54 |   mounted() {
55 |     this.interval = setInterval(() => {
56 |       this.currentSlide = this.currentSlide === 2 ? 0 : this.currentSlide + 1;
57 |     }, 2000);
58 |   },
59 |   beforeUnmount() {
60 |     clearInterval(this.interval);
61 |   },
62 | };
63 | </script>
64 | 
65 | <style>
66 | .fade-enter-active,
67 | .fade-leave-active {
68 |   transition: all 1s ease;
69 | }
70 | 
71 | .fade-enter-from {
72 |   opacity: 0;
73 |   transform: translateX(-100%);
74 | }
75 | .fade-leave-to {
76 |   opacity: 0;
77 |   transform: translateX(100%);
78 | }
79 | </style>
80 | 


--------------------------------------------------------------------------------
/vue3/src/components/UserCrud/Create.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <button class="px-2 py-1 border rounded my-4" @click="isModalOpen = true">
 3 |     Add User
 4 |   </button>
 5 |   <teleport to="body">
 6 |     <Modal v-if="isModalOpen" @close="isModalOpen = false">
 7 |       <template #title>
 8 |         Add New User
 9 |       </template>
10 |       <template #body>
11 |         <form @submit.prevent="submit">
12 |           <div class="p-2">
13 |             <label>Name</label>
14 |             <input
15 |               class="w-full p-2 rounded border"
16 |               placeholder="User Name"
17 |               v-model="state.form.name"
18 |             />
19 |           </div>
20 |           <div class="p-2">
21 |             <label>Email</label>
22 |             <input
23 |               class="w-full p-2 rounded border"
24 |               placeholder="User Email"
25 |               type="email"
26 |               v-model="state.form.email"
27 |             />
28 |           </div>
29 |           <div class="p-2">
30 |             <label>Avatar</label>
31 |             <input
32 |               class="w-full p-2 rounded border"
33 |               placeholder="Avatar Url"
34 |               type="text"
35 |               v-model="state.form.avatar"
36 |             />
37 |           </div>
38 |           <div class="p-2">
39 |             <input
40 |               class="w-full p-2 rounded border hover:bg-gray-300"
41 |               type="submit"
42 |               value="Create"
43 |             />
44 |           </div>
45 |         </form>
46 |       </template>
47 |     </Modal>
48 |   </teleport>
49 | </template>
50 | 
51 | <script>
52 | import { reactive, ref } from "vue";
53 | import Modal from "../Modal";
54 | import axios from "../../plugins/axios";
55 | export default {
56 |   components: { Modal },
57 |   setup(_, { emit }) {
58 |     const isModalOpen = ref(false);
59 |     const state = reactive({
60 |       form: {
61 |         name: "",
62 |         email: "",
63 |         avatar: "",
64 |       },
65 |     });
66 | 
67 |     async function submit() {
68 |       const { data } = await axios.post("/users", state.form);
69 |       emit("new-user-added", data);
70 |       state.form.email = "";
71 |       state.form.name = "";
72 |       state.form.avatar = "";
73 |       isModalOpen.value = false;
74 |     }
75 | 
76 |     return { isModalOpen, submit, state };
77 |   },
78 | };
79 | </script>
80 | 
81 | <style></style>
82 | 


--------------------------------------------------------------------------------
/vue3/src/pages/Calendar.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="m-auto p-2">
 3 |     <h1 class="text-3xl my-2 text-center">Vue Calendar</h1>
 4 |     <section class="mx-2 flex justify-between">
 5 |       <h2 class="font-bold">{{ currentMonthName }}</h2>
 6 |       <h2 class="font-bold">{{ currentYear }}</h2>
 7 |     </section>
 8 |     <section class="flex my-2">
 9 |       <p
10 |         class="text-center"
11 |         style="width: 14.28%"
12 |         v-for="day in days"
13 |         :key="day"
14 |       >
15 |         {{ day }}
16 |       </p>
17 |     </section>
18 |     <section class="flex flex-wrap">
19 |       <p
20 |         class="text-center"
21 |         style="width: 14.28%"
22 |         v-for="num in startDay()"
23 |         :key="num"
24 |       ></p>
25 |       <p
26 |         class="text-center"
27 |         style="width: 14.28%"
28 |         v-for="num in daysInMonth()"
29 |         :key="num"
30 |         :class="currenDateClass(num)"
31 |       >
32 |         {{ num }}
33 |       </p>
34 |     </section>
35 |     <section class="flex justify-between my-4">
36 |       <button class="px-2 border rounded" @click="prev">Prev</button>
37 |       <button class="px-2 border rounded" @click="next">Next</button>
38 |     </section>
39 |   </div>
40 | </template>
41 | 
42 | <script>
43 | export default {
44 |   data() {
45 |     return {
46 |       currentDate: new Date().getUTCDate(),
47 |       currentMonth: new Date().getMonth(),
48 |       currentYear: new Date().getFullYear(),
49 |       days: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
50 |     };
51 |   },
52 |   methods: {
53 |     daysInMonth() {
54 |       return new Date(this.currentYear, this.currentMonth + 1, 0).getDate();
55 |     },
56 |     startDay() {
57 |       return new Date(this.currentYear, this.currentMonth, 1).getDay();
58 |     },
59 |     next() {
60 |       if (this.currentMonth === 11) {
61 |         this.currentMonth = 0;
62 |         this.currentYear++;
63 |       } else {
64 |         this.currentMonth++;
65 |       }
66 |     },
67 |     prev() {
68 |       if (this.currentMonth === 0) {
69 |         this.currentMonth = 11;
70 |         this.currentYear--;
71 |       } else {
72 |         this.currentMonth--;
73 |       }
74 |     },
75 |     currenDateClass(num) {
76 |       const calenderFullDate = new Date(
77 |         this.currentYear,
78 |         this.currentMonth,
79 |         num
80 |       ).toDateString();
81 |       const currentFullDate = new Date().toDateString();
82 |       return calenderFullDate === currentFullDate ? "text-yellow-600" : "";
83 |     },
84 |   },
85 |   computed: {
86 |     currentMonthName() {
87 |       return new Date(
88 |         this.currentYear,
89 |         this.currentMonth
90 |       ).toLocaleString("default", { month: "long" });
91 |     },
92 |   },
93 | };
94 | </script>
95 | 
96 | <style></style>
97 | 


--------------------------------------------------------------------------------
/vue3/src/components/LoginModal.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div v-if="isLoginOpen">
 3 |     <section
 4 |       @click="close"
 5 |       class="z-20 h-screen w-screen bg-gray-500 fixed top-0 opacity-50"
 6 |     ></section>
 7 |     <div class="absolute inset-0">
 8 |       <div class="flex h-full">
 9 |         <div class="z-30 m-auto bg-white p-2 rounded shadow w-10/12 md:w-1/3">
10 |           <div class="p-2 border">
11 |             <h1 class="text-2xl text-center">Login</h1>
12 | 
13 |             <GoogleLogin @close-login-from-google="close" />
14 | 
15 |             <p class="my-3 text-center">Or</p>
16 |             <form class="p-2 my-2" @submit.prevent="submit">
17 |               <div class="my-4">
18 |                 <label>Email or Username</label>
19 |                 <input
20 |                   ref="emailRef"
21 |                   v-model="email"
22 |                   class="rounded shadow p-2 w-full"
23 |                   placeholder="Enter your email or username"
24 |                 />
25 |               </div>
26 |               <div class="my-4">
27 |                 <label>Password</label>
28 |                 <input
29 |                   v-model="password"
30 |                   class="rounded shadow p-2 w-full"
31 |                   type="password"
32 |                   placeholder="enter your password"
33 |                 />
34 |               </div>
35 |               <div class="my-4">
36 |                 <button
37 |                   type="submit"
38 |                   class="w-full rounded shadow-md bg-gradient-to-r from-red-800 to-pink-800 text-white p-2"
39 |                 >
40 |                   <span v-if="!isLoading">Login</span>
41 |                   <span v-else>⌛</span>
42 |                 </button>
43 |               </div>
44 |             </form>
45 |           </div>
46 |         </div>
47 |       </div>
48 |     </div>
49 |   </div>
50 | </template>
51 | 
52 | <script>
53 | import firebase from "../utilities/firebase";
54 | import GoogleLogin from "../components/Login/GoogleLogin";
55 | export default {
56 |   components: { GoogleLogin },
57 |   computed: {
58 |     isLoginOpen() {
59 |       return this.$store.state.isLoginOpen;
60 |     },
61 |   },
62 |   data() {
63 |     return {
64 |       email: "user1@gmail.com",
65 |       password: "password",
66 |       isLoading: false,
67 |     };
68 |   },
69 |   mounted() {
70 |     // console.log(this.$refs);
71 |     // this.$refs.emailRef.focus();
72 |   },
73 |   methods: {
74 |     submit() {
75 |       this.isLoading = true;
76 |       firebase
77 |         .auth()
78 |         .signInWithEmailAndPassword(this.email, this.password)
79 |         .then(() => {
80 |           this.email = "";
81 |           this.password = "";
82 |           this.isLoading = false;
83 |           this.close();
84 |         })
85 |         .catch((e) => {
86 |           console.log(e);
87 |           this.isLoading = false;
88 |         });
89 |     },
90 |     close() {
91 |       this.$store.commit("setLoginModal", false);
92 |     },
93 |   },
94 | };
95 | </script>
96 | 
97 | <style></style>
98 | 


--------------------------------------------------------------------------------
/vue3/src/pages/UserCrud.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <section class="flex md:w-full overflow-scroll">
  3 |     <div class="m-auto">
  4 |       <div class="flex flex-wrap justify-center w-full">
  5 |         <div class="mt-10 overflow-scroll">
  6 |           <Create @new-user-added="addUser" />
  7 |           <table>
  8 |             <thead>
  9 |               <tr>
 10 |                 <th class="px-4 py-2 border">ID</th>
 11 |                 <th class="px-4 py-2 border">Avatar</th>
 12 |                 <th class="px-4 py-2 border">Name</th>
 13 |                 <th class="px-4 py-2 border">Email</th>
 14 |                 <th class="px-4 py-2 border">Actions</th>
 15 |               </tr>
 16 |             </thead>
 17 |             <tbody>
 18 |               <tr v-for="user in state.users" :key="user.id">
 19 |                 <td class="border px-4 py-2">{{ user._id }}</td>
 20 |                 <td class="border px-4 py-2">
 21 |                   <img
 22 |                     :src="user.avatar"
 23 |                     :alt="user.name"
 24 |                     width="50"
 25 |                     class="rounded-full"
 26 |                   />
 27 |                 </td>
 28 |                 <td class="border px-4 py-2">{{ user.name }}</td>
 29 |                 <td class="border px-4 py-2">{{ user.email }}</td>
 30 |                 <td class="border px-4 py-2">
 31 |                   <button
 32 |                     class="px-2 py-1 bg-red-800 rounded text-white"
 33 |                     @click="destroy(user._id)"
 34 |                   >
 35 |                     Delete
 36 |                   </button>
 37 |                 </td>
 38 |               </tr>
 39 |             </tbody>
 40 |           </table>
 41 |           <div class="flex justify-between">
 42 |             <button
 43 |               class="px-3 py-2 border rounded"
 44 |               @click="prev"
 45 |               :disabled="state.users.page === 1"
 46 |               :class="state.users.page === 1 ? 'bg-gray-100' : 'hover:shadow'"
 47 |             >
 48 |               Prev
 49 |             </button>
 50 |             <button
 51 |               class="px-3 py-2 border rounded"
 52 |               @click="next"
 53 |               :disabled="state.users.page === state.users.total_pages"
 54 |               :class="
 55 |                 state.users.page === state.users.total_pages
 56 |                   ? 'bg-gray-100'
 57 |                   : 'hover:shadow'
 58 |               "
 59 |             >
 60 |               Next
 61 |             </button>
 62 |           </div>
 63 |         </div>
 64 |       </div>
 65 |     </div>
 66 |   </section>
 67 | </template>
 68 | 
 69 | <script>
 70 | import { onMounted, reactive } from "vue";
 71 | import axios from "../plugins/axios";
 72 | import Create from "../components/UserCrud/Create";
 73 | export default {
 74 |   components: { Create },
 75 |   setup() {
 76 |     const state = reactive({
 77 |       users: [],
 78 |     });
 79 | 
 80 |     onMounted(async () => {
 81 |       const { data } = await axios.get(`/users`);
 82 |       state.users = data;
 83 |     });
 84 | 
 85 |     async function next() {
 86 |       const { data } = await axios.get(`/users?page=2`);
 87 |       state.users = data;
 88 |     }
 89 | 
 90 |     async function prev() {
 91 |       const { data } = await axios.get(`/users?page=1`);
 92 |       state.users = data;
 93 |     }
 94 | 
 95 |     async function destroy(id) {
 96 |       await axios.delete(`/users/${id}`);
 97 |       state.users = state.users.filter((user) => user._id !== id);
 98 |     }
 99 | 
100 |     function addUser(data) {
101 |       state.users.push(data);
102 |     }
103 | 
104 |     return { state, next, prev, destroy, addUser };
105 |   },
106 | };
107 | </script>
108 | 
109 | <style></style>
110 | 


--------------------------------------------------------------------------------
/vue3/src/pages/Tensorflow.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <section class="flex w-full">
  3 |     <div class="m-auto">
  4 |       <div class="mt-10">
  5 |         <div class="text-center w-full">
  6 |           <h1 class="text-2xl mt-4">Tensorflow Object Detection</h1>
  7 |           <small>Try with cell phone only</small>
  8 |         </div>
  9 |         <div class="flex flex-wrap justify-center my-2">
 10 |           <div class="w-full flex justify-center">
 11 |             <button
 12 |               v-if="!isStreaming"
 13 |               @click="openCamera"
 14 |               class="w-32 rounded shadow-md bg-gradient-to-r from-blue-800 to-indigo-800 text-white px-2 py-1"
 15 |             >
 16 |               Open Camera
 17 |             </button>
 18 |             <div v-else class="flex justify-between">
 19 |               <button
 20 |                 @click="stopStreaming"
 21 |                 class="w-32 rounded shadow-md bg-gradient-to-r from-blue-800 to-indigo-800 text-white px-2 py-1"
 22 |               >
 23 |                 Stop Streaming
 24 |               </button>
 25 |               <button
 26 |                 @click="snapshot"
 27 |                 class="w-32 rounded shadow-md bg-gradient-to-r from-blue-800 to-indigo-800 text-white px-2 py-1"
 28 |               >
 29 |                 Snapshot
 30 |               </button>
 31 |             </div>
 32 |           </div>
 33 |           <video ref="videoRef" autoplay="true" width="100" />
 34 |         </div>
 35 |         <div class="flex flex-wrap justify-center">
 36 |           <img
 37 |             ref="imgRef"
 38 |             src="https://images.unsplash.com/photo-1567581935884-3349723552ca"
 39 |             width="200"
 40 |             crossorigin="anonymous"
 41 |           />
 42 |           <div class="w-full text-center my-4">
 43 |             <button
 44 |               @click="detect"
 45 |               class="w-32 rounded shadow-md bg-gradient-to-r from-red-800 to-pink-800 text-white p-2"
 46 |             >
 47 |               <span v-if="isLoading">Loading ... </span>
 48 |               <span v-else>Detect Object</span>
 49 |             </button>
 50 |             <div v-if="result.length > 0">
 51 |               <p>{{ result[0].class }}</p>
 52 |             </div>
 53 |           </div>
 54 |         </div>
 55 |       </div>
 56 |     </div>
 57 |   </section>
 58 | </template>
 59 | 
 60 | <script>
 61 | import { ref } from "vue";
 62 | require("@tensorflow/tfjs-backend-cpu");
 63 | require("@tensorflow/tfjs-backend-webgl");
 64 | const cocoSsd = require("@tensorflow-models/coco-ssd");
 65 | export default {
 66 |   setup() {
 67 |     const imgRef = ref("");
 68 |     const videoRef = ref("");
 69 |     const isLoading = ref(false);
 70 |     const isStreaming = ref(false);
 71 |     const result = ref([]);
 72 | 
 73 |     async function detect() {
 74 |       const img = imgRef.value;
 75 |       isLoading.value = true;
 76 |       const model = await cocoSsd.load();
 77 |       const predictions = await model.detect(img);
 78 |       result.value = predictions;
 79 |       console.log(predictions, img);
 80 |       isLoading.value = false;
 81 |     }
 82 | 
 83 |     async function openCamera() {
 84 |       if (navigator.mediaDevices.getUserMedia) {
 85 |         const devices = await navigator.mediaDevices.enumerateDevices();
 86 |         const cams = devices.filter((device) => device.kind === "videoinput");
 87 |         const camId = cams[0].deviceId;
 88 |         const video = cams.length === 1 ? true : { deviceId: { exact: camId } };
 89 |         navigator.mediaDevices.getUserMedia({ video: video }).then((stream) => {
 90 |           isStreaming.value = true;
 91 |           videoRef.value.srcObject = stream;
 92 |         });
 93 |       }
 94 |     }
 95 | 
 96 |     function stopStreaming() {
 97 |       const stream = videoRef.value.srcObject;
 98 |       const tracks = stream.getTracks();
 99 |       tracks.map((track) => track.stop());
100 |       isStreaming.value = false;
101 |     }
102 | 
103 |     function snapshot() {
104 |       const canvas = document.createElement("canvas");
105 |       const ctx = canvas.getContext("2d");
106 |       ctx.drawImage(videoRef.value, 0, 0, 200, 200);
107 |       const data = canvas.toDataURL("image/png");
108 |       imgRef.value.setAttribute("src", data);
109 |     }
110 | 
111 |     return {
112 |       imgRef,
113 |       result,
114 |       detect,
115 |       isLoading,
116 |       openCamera,
117 |       videoRef,
118 |       isStreaming,
119 |       stopStreaming,
120 |       snapshot,
121 |     };
122 |   },
123 | };
124 | </script>
125 | 
126 | <style></style>
127 | 


--------------------------------------------------------------------------------
/vue3/src/pages/Home.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="flex w-full">
  3 |     <div class="m-auto">
  4 |       <h1 class="text-center text-2xl md:text-4xl my-2">
  5 |         Vue 3 Full Course - 10 Apps in 10 Hours
  6 |       </h1>
  7 |       <div class="">
  8 |         <div class="flex justify-around mb-4">
  9 |           <a
 10 |             href="https://github.com/bitfumes/vue3-for-beginners"
 11 |             target="_blank"
 12 |             >Github Source Code</a
 13 |           >
 14 |           <a
 15 |             href="https://www.canva.com/design/DAEJRdAPBlc/V_Tcr4uLQhpf7Gh0ANXAKw/view?utm_content=DAEJRdAPBlc&utm_campaign=designshare&utm_medium=link&utm_source=sharebutton"
 16 |             target="_blank"
 17 |             >Canva Presentation</a
 18 |           >
 19 |         </div>
 20 | 
 21 |         <div class="flex justify-center">
 22 |           <div class="w-11/12 grid grid-cols-2 md:grid-cols-3 gap-4">
 23 |             <div v-for="app in list" :key="app.path" class="text-left my-4">
 24 |               <router-link class="w-full" :to="app.path">
 25 |                 <p class="text-xl font-semibold">🔷 {{ app.title }}</p>
 26 |               </router-link>
 27 |               <div>
 28 |                 <div class="font-semibold mt-2">Topic Covered:</div>
 29 |                 <p v-for="topic in app.concepts" :key="topic">{{ topic }}</p>
 30 |               </div>
 31 |             </div>
 32 |             <div class="text-left my-4">
 33 |               <p class="text-xl font-semibold">🔷 Login</p>
 34 |               <div class="">
 35 |                 <div class="text-lg font-semibold">Topic Covered:</div>
 36 |                 <p v-for="topic in login.concepts" :key="topic">{{ topic }}</p>
 37 |               </div>
 38 |             </div>
 39 |           </div>
 40 |         </div>
 41 |       </div>
 42 |     </div>
 43 |   </div>
 44 | </template>
 45 | 
 46 | <script>
 47 | import { ref } from "vue";
 48 | export default {
 49 |   setup() {
 50 |     const list = ref([
 51 |       {
 52 |         path: "/dc-heros",
 53 |         title: "DcHeros",
 54 |         concepts: [
 55 |           "v-for, v-bind, v-model, v-on",
 56 |           "methods",
 57 |           "computed properties ( getters & setters)",
 58 |           "vue components",
 59 |         ],
 60 |       },
 61 |       {
 62 |         path: "/calendar",
 63 |         title: "Calendar",
 64 |         concepts: ["Javascript Date", "Vue Router"],
 65 |       },
 66 |       {
 67 |         path: "/markdown",
 68 |         title: "Markdown",
 69 |         concepts: ["Using External Library", "Vue Mixins"],
 70 |       },
 71 |       {
 72 |         path: "/slider-carousel",
 73 |         title: "Slider",
 74 |         concepts: [
 75 |           "Vue Transition & Animation",
 76 |           "virtual DOM",
 77 |           "lifecycle hooks",
 78 |         ],
 79 |       },
 80 |       {
 81 |         path: "/calculator",
 82 |         title: "Calculator",
 83 |         concepts: [
 84 |           "resuable composition api",
 85 |           "window event listener",
 86 |           "Composition API",
 87 |         ],
 88 |       },
 89 |       {
 90 |         path: "/resuseable-modal",
 91 |         title: "ReuseableModal",
 92 |         concepts: ["slots", "named slots"],
 93 |       },
 94 |       {
 95 |         path: "/chat",
 96 |         title: "Chat",
 97 |         concepts: [
 98 |           "Firebase Realtime Database",
 99 |           "vuex v4",
100 |           "Custom Router middleware",
101 |         ],
102 |       },
103 |       {
104 |         path: "/user-crud",
105 |         title: "UserCrud",
106 |         concepts: [
107 |           "using axios",
108 |           "external API",
109 |           "reactive vue3 api",
110 |           "pagination",
111 |           "envirnment variable (.env file)",
112 |         ],
113 |       },
114 |       {
115 |         path: "/tensorflow",
116 |         title: "Tensorflow",
117 |         concepts: [
118 |           "Using Tensorflow with Vue",
119 |           "Device Camera Open",
120 |           "Working with Canvas",
121 |         ],
122 |       },
123 |     ]);
124 |     const login = ref({
125 |       title: "Login Modal",
126 |       concepts: [
127 |         "Create Modal",
128 |         "Vue Custom Events Emitting",
129 |         "Form Handling",
130 |         "firebase authentication",
131 |         "loading effect",
132 |         "Template Refs",
133 |         "component props",
134 |         "firebase google login",
135 |         "Refactoring with component",
136 |         " vue3 teleport",
137 |       ],
138 |     });
139 | 
140 |     return { list, login };
141 |   },
142 | };
143 | </script>
144 | 
145 | <style></style>
146 | 


--------------------------------------------------------------------------------
/vue3/src/pages/Calculator.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <section class="flex w-full">
  3 |     <div class="m-auto">
  4 |       <div>
  5 |         <h1 class="text-3xl text-center">Calculator</h1>
  6 |         <small>You can fully use keyboard to calculate</small>
  7 |       </div>
  8 |       <p
  9 |         class="text-3xl text-right border mt-10 w-56 h-10 overflow-x-scroll"
 10 |         style="direction:rtl"
 11 |       >
 12 |         {{ currentNum }}
 13 |       </p>
 14 |       <div class="h-10">
 15 |         <small v-if="selectedOperation"
 16 |           >{{ prevNum }} {{ selectedOperation }} {{ currentNum }}</small
 17 |         >
 18 |       </div>
 19 |       <div class="grid grid-cols-4 gap-1">
 20 |         <button
 21 |           @click="pressed('1')"
 22 |           class="p-2 w-10 h-10 border rounded shadow"
 23 |         >
 24 |           1
 25 |         </button>
 26 |         <button
 27 |           @click="pressed('2')"
 28 |           class="p-2 w-10 h-10 border rounded shadow"
 29 |         >
 30 |           2
 31 |         </button>
 32 |         <button
 33 |           @click="pressed('3')"
 34 |           class="p-2 w-10 h-10 border rounded shadow"
 35 |         >
 36 |           3
 37 |         </button>
 38 |         <button
 39 |           @click="pressed('+')"
 40 |           class="p-2 w-10 h-10 border rounded shadow"
 41 |         >
 42 |           +
 43 |         </button>
 44 |         <button
 45 |           @click="pressed('4')"
 46 |           class="p-2 w-10 h-10 border rounded shadow"
 47 |         >
 48 |           4
 49 |         </button>
 50 |         <button
 51 |           @click="pressed('5')"
 52 |           class="p-2 w-10 h-10 border rounded shadow"
 53 |         >
 54 |           5
 55 |         </button>
 56 |         <button
 57 |           @click="pressed('6')"
 58 |           class="p-2 w-10 h-10 border rounded shadow"
 59 |         >
 60 |           6
 61 |         </button>
 62 |         <button
 63 |           @click="pressed('-')"
 64 |           class="p-2 w-10 h-10 border rounded shadow"
 65 |         >
 66 |           -
 67 |         </button>
 68 |         <button
 69 |           @click="pressed('7')"
 70 |           class="p-2 w-10 h-10 border rounded shadow"
 71 |         >
 72 |           7
 73 |         </button>
 74 |         <button
 75 |           @click="pressed('8')"
 76 |           class="p-2 w-10 h-10 border rounded shadow"
 77 |         >
 78 |           8
 79 |         </button>
 80 |         <button
 81 |           @click="pressed('9')"
 82 |           class="p-2 w-10 h-10 border rounded shadow"
 83 |         >
 84 |           9
 85 |         </button>
 86 |         <button
 87 |           @click="pressed('*')"
 88 |           class="p-2 w-10 h-10 border rounded shadow"
 89 |         >
 90 |           *
 91 |         </button>
 92 |         <button @click="pressed('c')" class="p-2 h-10 border rounded shadow">
 93 |           C
 94 |         </button>
 95 |         <button @click="pressed('0')" class="p-2 h-10 border rounded shadow">
 96 |           0
 97 |         </button>
 98 |         <button
 99 |           @click="pressed('=')"
100 |           class="p-2 w-10 h-10 border rounded shadow"
101 |         >
102 |           =
103 |         </button>
104 |         <button
105 |           @click="pressed('/')"
106 |           class="p-2 w-10 h-10 border rounded shadow"
107 |         >
108 |           /
109 |         </button>
110 |       </div>
111 |     </div>
112 |   </section>
113 | </template>
114 | 
115 | <script>
116 | import { ref } from "vue";
117 | import useWindowEvent from "../utilities/composition/useWindowEvent";
118 | export default {
119 |   setup() {
120 |     const operations = ["+", "-", "*", "/"];
121 |     const numbers = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0"];
122 |     const currentNum = ref("");
123 |     const prevNum = ref("");
124 |     const selectedOperation = ref("");
125 | 
126 |     function pressed(value) {
127 |       if (value === "=" || value === "Enter") calculate();
128 |       else if (value === "c") clear();
129 |       else if (operations.includes(value)) applyOperation(value);
130 |       else if (numbers.includes(value)) appendNumber(value);
131 |     }
132 | 
133 |     function appendNumber(value) {
134 |       currentNum.value = currentNum.value + value;
135 |     }
136 | 
137 |     function applyOperation(value) {
138 |       calculate();
139 |       prevNum.value = currentNum.value;
140 |       currentNum.value = "";
141 |       selectedOperation.value = value;
142 |     }
143 | 
144 |     function calculate() {
145 |       if (selectedOperation.value === "*") multiply();
146 |       else if (selectedOperation.value === "/") divide();
147 |       else if (selectedOperation.value === "-") subtract();
148 |       else if (selectedOperation.value === "+") sum();
149 | 
150 |       prevNum.value = "";
151 |       selectedOperation.value = "";
152 |     }
153 | 
154 |     function multiply() {
155 |       currentNum.value = prevNum.value * currentNum.value;
156 |     }
157 |     function divide() {
158 |       currentNum.value = prevNum.value / currentNum.value;
159 |     }
160 |     function subtract() {
161 |       currentNum.value = prevNum.value - currentNum.value;
162 |     }
163 |     function sum() {
164 |       currentNum.value = +prevNum.value + +currentNum.value;
165 |     }
166 | 
167 |     const clear = () => (currentNum.value = "");
168 | 
169 |     const handleKeydown = (e) => pressed(e.key);
170 |     useWindowEvent("keydown", handleKeydown);
171 | 
172 |     return { currentNum, pressed, selectedOperation, prevNum };
173 |   },
174 | };
175 | </script>
176 | 
177 | <style></style>
178 | 


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