├── src
    ├── assets
    │   ├── main.css
    │   ├── tailwind.css
    │   └── previews
    │   │   ├── Logo.png
    │   │   ├── home.png
    │   │   ├── login.png
    │   │   └── dashboard.png
    ├── views
    │   ├── HomeView.vue
    │   ├── DashboardView.vue
    │   └── SigninView.vue
    ├── stores
    │   └── counter.ts
    ├── components
    │   ├── svg
    │   │   ├── Close.vue
    │   │   ├── Info.vue
    │   │   ├── LinkedIn.vue
    │   │   ├── Delete.vue
    │   │   ├── Twitter.vue
    │   │   └── Google.vue
    │   ├── EmptyCard.vue
    │   ├── Footer.vue
    │   ├── Hero.vue
    │   ├── Tasks.vue
    │   ├── Navbar.vue
    │   ├── TaskModal.vue
    │   └── TaskCard.vue
    ├── main.ts
    ├── App.vue
    ├── firebase.ts
    └── router
    │   └── index.ts
├── env.d.ts
├── .vscode
    ├── extensions.json
    └── settings.json
├── public
    ├── _redirects
    ├── riyad.jpg
    ├── favicon.ico
    ├── default-man.jpg
    ├── favicon-16x16.png
    ├── favicon-32x32.png
    ├── apple-touch-icon.png
    ├── android-chrome-192x192.png
    ├── android-chrome-512x512.png
    └── site.webmanifest
├── .eslintrc
├── postcss.config.js
├── tsconfig.config.json
├── tailwind.config.js
├── vite.config.ts
├── .gitignore
├── tsconfig.json
├── package.json
├── README.md
└── index.html


/src/assets/main.css:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="vite/client" />
2 | 


--------------------------------------------------------------------------------
/.vscode/extensions.json:
--------------------------------------------------------------------------------
1 | {
2 |   "recommendations": ["Vue.volar"]
3 | }
4 | 


--------------------------------------------------------------------------------
/public/_redirects:
--------------------------------------------------------------------------------
1 | # Redirects from what the browser requests to what we serve
2 | /*    /  200


--------------------------------------------------------------------------------
/public/riyad.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nurRiyad/vuefire-todos/HEAD/public/riyad.jpg


--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "@antfu",
3 |   "rules": {
4 |     "no-console":"off"
5 |   }
6 | }


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nurRiyad/vuefire-todos/HEAD/public/favicon.ico


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


--------------------------------------------------------------------------------
/public/default-man.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nurRiyad/vuefire-todos/HEAD/public/default-man.jpg


--------------------------------------------------------------------------------
/public/favicon-16x16.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nurRiyad/vuefire-todos/HEAD/public/favicon-16x16.png


--------------------------------------------------------------------------------
/public/favicon-32x32.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nurRiyad/vuefire-todos/HEAD/public/favicon-32x32.png


--------------------------------------------------------------------------------
/public/apple-touch-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nurRiyad/vuefire-todos/HEAD/public/apple-touch-icon.png


--------------------------------------------------------------------------------
/src/assets/previews/Logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nurRiyad/vuefire-todos/HEAD/src/assets/previews/Logo.png


--------------------------------------------------------------------------------
/src/assets/previews/home.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nurRiyad/vuefire-todos/HEAD/src/assets/previews/home.png


--------------------------------------------------------------------------------
/src/assets/previews/login.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nurRiyad/vuefire-todos/HEAD/src/assets/previews/login.png


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: {
3 |     tailwindcss: {},
4 |     autoprefixer: {},
5 |   },
6 | }
7 | 


--------------------------------------------------------------------------------
/public/android-chrome-192x192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nurRiyad/vuefire-todos/HEAD/public/android-chrome-192x192.png


--------------------------------------------------------------------------------
/public/android-chrome-512x512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nurRiyad/vuefire-todos/HEAD/public/android-chrome-512x512.png


--------------------------------------------------------------------------------
/src/assets/previews/dashboard.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nurRiyad/vuefire-todos/HEAD/src/assets/previews/dashboard.png


--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "editor.formatOnSave": false,
 3 |   "editor.codeActionsOnSave": {
 4 |     "source.fixAll": "explicit"
 5 |   },
 6 |   "cSpell.words": [
 7 |     "vuefire"
 8 |   ]
 9 | }
10 | 


--------------------------------------------------------------------------------
/public/site.webmanifest:
--------------------------------------------------------------------------------
1 | {"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}


--------------------------------------------------------------------------------
/src/views/HomeView.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { defineAsyncComponent } from 'vue'
 3 | 
 4 | const Hero = defineAsyncComponent(() => import('@/components/Hero.vue'))
 5 | </script>
 6 | 
 7 | <template>
 8 |   <div>
 9 |     <Hero />
10 |   </div>
11 | </template>
12 | 


--------------------------------------------------------------------------------
/tsconfig.config.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "@vue/tsconfig/tsconfig.node.json",
 3 |   "ignoreDeprecations": "5.0",
 4 |   "include": ["vite.config.*", "vitest.config.*", "cypress.config.*", "playwright.config.*"],
 5 |   "compilerOptions": {
 6 |     "composite": true,
 7 |     "types": ["node"]
 8 |   }
 9 | }
10 | 


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | /** @type {import('tailwindcss').Config} */
 2 | module.exports = {
 3 |   darkMode: 'class',
 4 |   content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
 5 |   theme: {
 6 |     extend: {},
 7 |   },
 8 |   daisyui: {
 9 |     themes: ['dark'],
10 |   },
11 | 
12 |   plugins: [require('daisyui')],
13 | }
14 | 


--------------------------------------------------------------------------------
/src/stores/counter.ts:
--------------------------------------------------------------------------------
 1 | import { computed, ref } from 'vue'
 2 | import { defineStore } from 'pinia'
 3 | 
 4 | export const useCounterStore = defineStore('counter', () => {
 5 |   const count = ref(0)
 6 |   const doubleCount = computed(() => count.value * 2)
 7 |   function increment() {
 8 |     count.value++
 9 |   }
10 | 
11 |   return { count, doubleCount, increment }
12 | })
13 | 


--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
 1 | import { URL, fileURLToPath } 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 | 


--------------------------------------------------------------------------------
/src/components/svg/Close.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <svg
 3 |     xmlns="http://www.w3.org/2000/svg"
 4 |     class="h-6 w-6"
 5 |     fill="none"
 6 |     viewBox="0 0 24 24"
 7 |     stroke="currentColor"
 8 |   >
 9 |     <path
10 |       stroke-linecap="round"
11 |       stroke-linejoin="round"
12 |       stroke-width="2"
13 |       d="M6 18L18 6M6 6l12 12"
14 |     />
15 |   </svg>
16 | </template>
17 | 


--------------------------------------------------------------------------------
/src/components/EmptyCard.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="flex justify-between items-center cursor-pointer px-5 py-5 bg-base-300 rounded-md">
 3 |     <div>
 4 |       <h1 class="text-2xl font-semibold text-gray-400">
 5 |         No Task Found
 6 |       </h1>
 7 |       <p class="mt-2 text-gray-400">
 8 |         Click Create New Task to add a new task
 9 |       </p>
10 |     </div>
11 |   </div>
12 | </template>
13 | 


--------------------------------------------------------------------------------
/.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/extensions.json
22 | .idea
23 | *.suo
24 | *.ntvs*
25 | *.njsproj
26 | *.sln
27 | *.sw?
28 | 


--------------------------------------------------------------------------------
/src/components/svg/Info.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <svg
 3 |     xmlns="http://www.w3.org/2000/svg"
 4 |     fill="none"
 5 |     viewBox="0 0 24 24"
 6 |     class="stroke-current flex-shrink-0 w-6 h-6"
 7 |   >
 8 |     <path
 9 |       stroke-linecap="round"
10 |       stroke-linejoin="round"
11 |       stroke-width="2"
12 |       d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
13 |     />
14 |   </svg>
15 | </template>
16 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "@vue/tsconfig/tsconfig.web.json",
 3 |   "ignoreDeprecations": "5.0",
 4 |   "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
 5 |   "compilerOptions": {
 6 |     "baseUrl": ".",
 7 |     "ignoreDeprecations": "5.0",
 8 |     "paths": {
 9 |       "@/*": ["./src/*"]
10 |     }
11 |   },
12 | 
13 |   "references": [
14 |     {
15 |       "path": "./tsconfig.config.json"
16 |     }
17 |   ]
18 | }
19 | 


--------------------------------------------------------------------------------
/src/components/svg/LinkedIn.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <svg
 3 |     xmlns="http://www.w3.org/2000/svg"
 4 |     width="24"
 5 |     height="24"
 6 |     viewBox="0 0 24 24"
 7 |     class="fill-current"
 8 |   >
 9 |     <path
10 |       d="M19.615 3.184c-3.604-.246-11.631-.245-15.23 0-3.897.266-4.356 2.62-4.385 8.816.029 6.185.484 8.549 4.385 8.816 3.6.245 11.626.246 15.23 0 3.897-.266 4.356-2.62 4.385-8.816-.029-6.185-.484-8.549-4.385-8.816zm-10.615 12.816v-8l8 3.993-8 4.007z"
11 |     />
12 |   </svg>
13 | </template>
14 | 


--------------------------------------------------------------------------------
/src/components/Footer.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <footer class="footer footer-center p-10 border-t border-base-300">
 3 |     <div>
 4 |       <img class="w-12 rounded-full" src="/riyad.jpg" alt="riyad profile img">
 5 |       <p class="font-bold">
 6 |         Md. Al Asad Nur Riyad <br>Software Engineer @AppsCode
 7 |       </p>
 8 |       <p>
 9 |         <a class="underline" href="https://github.com/nurRiyad/vue-todos">Source Code</a>
10 |         - No Right Reserved
11 |       </p>
12 |     </div>
13 |   </footer>
14 | </template>
15 | 


--------------------------------------------------------------------------------
/src/main.ts:
--------------------------------------------------------------------------------
 1 | import { createPinia } from 'pinia'
 2 | import { createApp } from 'vue'
 3 | 
 4 | import { autoAnimatePlugin } from '@formkit/auto-animate/vue'
 5 | import { VueFire, VueFireAuth } from 'vuefire'
 6 | import App from './App.vue'
 7 | import router from './router'
 8 | 
 9 | import { firebaseApp } from './firebase'
10 | 
11 | import './assets/main.css'
12 | import './assets/tailwind.css'
13 | 
14 | const app = createApp(App)
15 | 
16 | app.use(createPinia())
17 | app.use(router)
18 | app.use(VueFire, {
19 |   firebaseApp,
20 |   modules: [VueFireAuth()],
21 | })
22 | app.use(autoAnimatePlugin)
23 | 
24 | app.mount('#app')
25 | 


--------------------------------------------------------------------------------
/src/components/svg/Delete.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <svg
 3 |     xmlns="http://www.w3.org/2000/svg"
 4 |     width="24"
 5 |     height="24"
 6 |     viewBox="0 0 24 24"
 7 |   >
 8 |     <path
 9 |       fill="#ffffff"
10 |       d="M10 5h4a2 2 0 1 0-4 0ZM8.5 5a3.5 3.5 0 1 1 7 0h5.75a.75.75 0 0 1 0 1.5h-1.32l-1.17 12.111A3.75 3.75 0 0 1 15.026 22H8.974a3.75 3.75 0 0 1-3.733-3.389L4.07 6.5H2.75a.75.75 0 0 1 0-1.5H8.5Zm2 4.75a.75.75 0 0 0-1.5 0v7.5a.75.75 0 0 0 1.5 0v-7.5ZM14.25 9a.75.75 0 0 1 .75.75v7.5a.75.75 0 0 1-1.5 0v-7.5a.75.75 0 0 1 .75-.75Zm-7.516 9.467a2.25 2.25 0 0 0 2.24 2.033h6.052a2.25 2.25 0 0 0 2.24-2.033L18.424 6.5H5.576l1.158 11.967Z"
11 |     />
12 |   </svg>
13 | </template>
14 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { useAutoAnimate } from '@formkit/auto-animate/vue'
 3 | import { defineAsyncComponent } from 'vue'
 4 | 
 5 | const Footer = defineAsyncComponent(() => import('./components/Footer.vue'))
 6 | const Navbar = defineAsyncComponent(() => import('./components/Navbar.vue'))
 7 | 
 8 | const [parent] = useAutoAnimate()
 9 | </script>
10 | 
11 | <template>
12 |   <div class="gd-container">
13 |     <Navbar />
14 |     <main ref="parent">
15 |       <RouterView />
16 |     </main>
17 |     <Footer />
18 |   </div>
19 | </template>
20 | 
21 | <style scoped>
22 | .gd-container {
23 |   display: grid;
24 |   grid-template-rows: auto 1fr auto;
25 |   min-height: 100vh;
26 | }
27 | </style>
28 | 


--------------------------------------------------------------------------------
/src/components/svg/Twitter.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <svg
 3 |     xmlns="http://www.w3.org/2000/svg"
 4 |     width="24"
 5 |     height="24"
 6 |     viewBox="0 0 24 24"
 7 |     class="fill-current"
 8 |   >
 9 |     <path
10 |       d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"
11 |     />
12 |   </svg>
13 | </template>
14 | 


--------------------------------------------------------------------------------
/src/firebase.ts:
--------------------------------------------------------------------------------
 1 | import { initializeApp } from 'firebase/app'
 2 | import { collection, getFirestore } from 'firebase/firestore'
 3 | // ... other firebase imports
 4 | 
 5 | export const firebaseApp = initializeApp({
 6 |   // your application settings
 7 |   apiKey: 'AIzaSyAR84yRMSxqodyPoQbyYso0iNo6T--qZ7g',
 8 |   authDomain: 'personal-project-4ac6f.firebaseapp.com',
 9 |   projectId: 'personal-project-4ac6f',
10 |   storageBucket: 'personal-project-4ac6f.appspot.com',
11 |   messagingSenderId: '337096134393',
12 |   appId: '1:337096134393:web:edd7878c77fc6add839c28',
13 | })
14 | 
15 | // used for the firestore refs
16 | const db = getFirestore(firebaseApp)
17 | 
18 | // here we can export reusable database references
19 | export const todosRef = collection(db, 'todos')
20 | 


--------------------------------------------------------------------------------
/src/components/Hero.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { useRouter } from 'vue-router'
 3 | 
 4 | const router = useRouter()
 5 | 
 6 | const onClick = () => {
 7 |   router.push('/dashboard')
 8 | }
 9 | </script>
10 | 
11 | <template>
12 |   <div class="hero min-h-[70vh]">
13 |     <div class="hero-content text-center">
14 |       <div class="max-w-md">
15 |         <h1 class="text-5xl font-bold">
16 |           The Never-Ending To-Do List
17 |         </h1>
18 |         <p class="py-6">
19 |           Vue3, Vuefire, Firebase, Tailwindcss powered to-do app. Create,
20 |           update, delete tasks with ease, and user authentication. Boss up your
21 |           task game now!
22 |         </p>
23 |         <button class="btn btn-primary" @click="onClick">
24 |           Get Started
25 |         </button>
26 |       </div>
27 |     </div>
28 |   </div>
29 | </template>
30 | 


--------------------------------------------------------------------------------
/src/components/svg/Google.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <svg xmlns="http://www.w3.org/2000/svg" width="31.27" height="32" viewBox="0 0 256 262"><path fill="#4285F4" d="M255.878 133.451c0-10.734-.871-18.567-2.756-26.69H130.55v48.448h71.947c-1.45 12.04-9.283 30.172-26.69 42.356l-.244 1.622l38.755 30.023l2.685.268c24.659-22.774 38.875-56.282 38.875-96.027" /><path fill="#34A853" d="M130.55 261.1c35.248 0 64.839-11.605 86.453-31.622l-41.196-31.913c-11.024 7.688-25.82 13.055-45.257 13.055c-34.523 0-63.824-22.773-74.269-54.25l-1.531.13l-40.298 31.187l-.527 1.465C35.393 231.798 79.49 261.1 130.55 261.1" /><path fill="#FBBC05" d="M56.281 156.37c-2.756-8.123-4.351-16.827-4.351-25.82c0-8.994 1.595-17.697 4.206-25.82l-.073-1.73L15.26 71.312l-1.335.635C5.077 89.644 0 109.517 0 130.55s5.077 40.905 13.925 58.602l42.356-32.782" /><path fill="#EB4335" d="M130.55 50.479c24.514 0 41.05 10.589 50.479 19.438l36.844-35.974C195.245 12.91 165.798 0 130.55 0C79.49 0 35.393 29.301 13.925 71.947l42.211 32.783c10.59-31.477 39.891-54.251 74.414-54.251" /></svg>
3 | </template>
4 | 


--------------------------------------------------------------------------------
/src/router/index.ts:
--------------------------------------------------------------------------------
 1 | import { createRouter, createWebHistory } from 'vue-router'
 2 | import { getCurrentUser } from 'vuefire'
 3 | 
 4 | const HomeView = () => import('@/views/HomeView.vue')
 5 | const SigninView = () => import('@/views/SigninView.vue')
 6 | const DashboardView = () => import('@/views/DashboardView.vue')
 7 | 
 8 | const router = createRouter({
 9 |   history: createWebHistory(import.meta.env.BASE_URL),
10 |   routes: [
11 |     {
12 |       meta: { requiresAuth: false },
13 |       path: '/',
14 |       name: 'home',
15 |       component: HomeView,
16 |     },
17 |     {
18 |       meta: { requiresAuth: true },
19 |       path: '/dashboard',
20 |       name: 'dashboard',
21 |       component: DashboardView,
22 |     },
23 |     {
24 |       meta: { requiresAuth: false },
25 |       path: '/signin',
26 |       name: 'signin',
27 |       component: SigninView,
28 |     },
29 |   ],
30 | })
31 | 
32 | router.beforeEach(async (to) => {
33 |   if (to.meta.requiresAuth) {
34 |     const currentUser = await getCurrentUser()
35 |     if (!currentUser) {
36 |       return {
37 |         path: '/signin',
38 |       }
39 |     }
40 |   }
41 | })
42 | 
43 | export default router
44 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-todos",
 3 |   "version": "0.0.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "dev": "vite",
 7 |     "build": "run-p type-check build-only",
 8 |     "preview": "vite preview",
 9 |     "build-only": "vite build",
10 |     "type-check": "vue-tsc --noEmit",
11 |     "lint": "eslint .",
12 |     "lint:fix": "eslint . --fix"
13 |   },
14 |   "dependencies": {
15 |     "@formkit/auto-animate": "^0.8.1",
16 |     "firebase": "^10.6.0",
17 |     "pinia": "^2.1.7",
18 |     "vue": "^3.3.8",
19 |     "vue-router": "^4.2.5",
20 |     "vuefire": "^3.1.18"
21 |   },
22 |   "devDependencies": {
23 |     "@antfu/eslint-config": "^0.35.3",
24 |     "@rushstack/eslint-patch": "^1.1.4",
25 |     "@types/node": "^18.11.12",
26 |     "@vitejs/plugin-vue": "^4.0.0",
27 |     "@vue/eslint-config-prettier": "^7.0.0",
28 |     "@vue/eslint-config-typescript": "^11.0.0",
29 |     "@vue/tsconfig": "^0.1.3",
30 |     "autoprefixer": "^10.4.13",
31 |     "daisyui": "^4.0.7",
32 |     "eslint": "^8.35.0",
33 |     "eslint-plugin-vue": "^9.3.0",
34 |     "npm-run-all": "^4.1.5",
35 |     "postcss": "^8.4.21",
36 |     "tailwindcss": "^3.2.4",
37 |     "typescript": "~4.7.4",
38 |     "vite": "^4.0.0",
39 |     "vue-tsc": "^1.0.12"
40 |   }
41 | }
42 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Vuefire Todos
 2 | 
 3 | Vue3, Vuefire, Firebase, Tailwindcss powered to-do app. Create, update, delete tasks with ease, and user authentication. Boss up your task game now!
 4 | 
 5 | 
 6 | 
 7 | ## Demo
 8 | 
 9 | https://vuefire-todos.netlify.app/
10 | 
11 | > Hosted on [Netlify](https://netlify.com/): 
12 | 
13 | 
14 | ### Built with
15 | 
16 | <p align="center">
17 |     <img width="200" src="./src/assets/previews/Logo.png">
18 | </p>
19 | 
20 | Vuefire Todos built with [Vue3](https://vuejs.org), [Vuefire](https://vuefire.vuejs.org/) [Vue-Router](https://router.vuejs.org/) & [Tailwind](https://tailwindcss.com/)
21 | 
22 | 
23 | ## Previews
24 | 
25 | <p align="center">
26 |   <a href="https://vuefire-todos.netlify.app/" target="_blank">
27 |     <img width="1090" src="./src/assets/previews/dashboard.png">
28 |     <img width="1090" src="./src/assets/previews/home.png">
29 |     <img width="1090" src="./src/assets/previews/login.png">
30 |     <br>
31 |     Live Demo
32 |   </a>
33 | </p>
34 | 
35 | 
36 | ## Features
37 | 
38 | - Client Side Rendering
39 | - Vite-based hot module replacement (HMR) dev environment
40 | - Deploys anywhere with zero config Netlify
41 | - Login with password less email link
42 | - Login with gmail
43 | - Route Protection
44 | - Dom change animation
45 | - Crate Task with description
46 | - Show task my it's status
47 | - Search task my title
48 | 
49 | ## Build Setup
50 | 
51 | **Requires Node.js 16+**
52 | 
53 | ```bash
54 | # install dependencies
55 | yarn install
56 | 
57 | # serve in dev mode, with hot reload at localhost:5173
58 | yarn run dev
59 | 
60 | # build for production
61 | yarn run build
62 | 
63 | # serve in production mode
64 | yarn run preview
65 | 
66 | ```
67 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <link rel="icon" href="/favicon.ico" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 | 
 8 |     <!-- Primary Meta Tags -->
 9 |     <title>Vuefire Todos</title>
10 |     <meta name="title" content="Vuefire Todos By nurRiyad" />
11 |     <meta
12 |       name="description"
13 |       content="Vuefire Todos: Vue3, Vuefire, Firebase, Tailwindcss powered to-do app. Create, update, delete tasks with ease, and user authentication. Boss up your task game now!"
14 |     />
15 | 
16 |     <!-- Open Graph / Facebook -->
17 |     <meta property="og:type" content="website" />
18 |     <meta property="og:url" content="https://vuefire-todos.netlify.app/" />
19 |     <meta property="og:title" content="Vuefire Todos By nurRiyad" />
20 |     <meta
21 |       property="og:description"
22 |       content="Vuefire Todos: Vue3, Vuefire, Firebase, Tailwindcss powered to-do app. Create, update, delete tasks with ease, and user authentication. Boss up your task game now!"
23 |     />
24 |     <meta
25 |       property="og:image"
26 |       content="https://vuefire-todos.netlify.app/android-chrome-512x512.png"
27 |     />
28 | 
29 |     <!-- Twitter -->
30 |     <meta property="twitter:card" content="summary_large_image" />
31 |     <meta property="twitter:url" content="https://vuefire-todos.netlify.app/" />
32 |     <meta property="twitter:title" content="Vuefire Todos By nurRiyad" />
33 |     <meta
34 |       property="twitter:description"
35 |       content="Vuefire Todos: Vue3, Vuefire, Firebase, Tailwindcss powered to-do app. Create, update, delete tasks with ease, and user authentication. Boss up your task game now!"
36 |     />
37 |     <meta
38 |       property="twitter:image"
39 |       content="https://vuefire-todos.netlify.app/android-chrome-512x512.png"
40 |     />
41 |   </head>
42 |   <body>
43 |     <div id="app"></div>
44 |     <script type="module" src="/src/main.ts"></script>
45 |   </body>
46 | </html>
47 | 


--------------------------------------------------------------------------------
/src/components/Tasks.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { computed, defineAsyncComponent, ref, watch } from 'vue'
 3 | import { getCurrentUser, useCollection, useFirestore } from 'vuefire'
 4 | import { collection } from 'firebase/firestore'
 5 | 
 6 | interface Props {
 7 |   showTaskType: string
 8 |   searchText: string
 9 | }
10 | 
11 | const props = withDefaults(defineProps<Props>(), {
12 |   showTaskType: 'inprogress',
13 |   searchText: '',
14 | })
15 | 
16 | const EmptyCard = defineAsyncComponent(() => import('@/components/EmptyCard.vue'))
17 | const TaskCard = defineAsyncComponent(() => import('@/components/TaskCard.vue'))
18 | 
19 | const isDataFetched = ref(true)
20 | 
21 | const db = await useFirestore()
22 | const user = await getCurrentUser()
23 | const todos = await useCollection(collection(db, `/users/${user?.uid}/todos`))
24 | 
25 | const filteredTodos = computed(() => {
26 |   return todos.value.filter((todo) => {
27 |     if (props.showTaskType === 'all')
28 |       return true
29 |     else return todo.type === props.showTaskType
30 |   })
31 | })
32 | 
33 | watch(todos, () => {
34 |   isDataFetched.value = false
35 | })
36 | 
37 | const searchedTodos = computed(() => {
38 |   return filteredTodos.value.filter((todo) => {
39 |     if (props.searchText.length <= 1) {
40 |       return true
41 |     }
42 |     else {
43 |       const title = todo.title.toLowerCase() || ''
44 |       return title.includes(props.searchText.toLocaleLowerCase())
45 |     }
46 |   })
47 | })
48 | </script>
49 | 
50 | <template>
51 |   <div
52 |     v-for="todo in searchedTodos"
53 |     :key="todo.id"
54 |     class="max-w-3xl mx-auto shadow-md"
55 |   >
56 |     <TaskCard
57 |       :id="todo.id"
58 |       :title="todo.title"
59 |       :description="todo.description"
60 |       :type="todo.type"
61 |     />
62 |   </div>
63 |   <div v-if="isDataFetched" class="space-y-5 mt-10 flex flex-col items-center">
64 |     <div class="skeleton w-[48rem] h-8" />
65 |     <div class="skeleton w-[48rem] h-8" />
66 |     <div class="skeleton w-[48rem] h-8" />
67 |     <div class="skeleton w-[48rem] h-8" />
68 |   </div>
69 |   <div
70 |     v-else-if="searchedTodos.length === 0"
71 |     class="max-w-2xl mx-auto shadow-md"
72 |   >
73 |     <EmptyCard />
74 |   </div>
75 | </template>
76 | 


--------------------------------------------------------------------------------
/src/views/DashboardView.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { defineAsyncComponent, ref } from 'vue'
 3 | import { useAutoAnimate } from '@formkit/auto-animate/vue'
 4 | 
 5 | const Tasks = defineAsyncComponent(() => import('@/components/Tasks.vue'))
 6 | const TaskModal = defineAsyncComponent(() => import('@/components/TaskModal.vue'))
 7 | 
 8 | const showTaskType = ref('all')
 9 | const searchText = ref('')
10 | 
11 | const [parent] = useAutoAnimate()
12 | </script>
13 | 
14 | <template>
15 |   <div class="container mx-auto max-w-7xl">
16 |     <div class="py-5 px-4 space-y-5">
17 |       <div class="flex justify-center align-baseline space-x-5">
18 |         <input
19 |           v-model="searchText"
20 |           type="text"
21 |           placeholder="Type here to Search"
22 |           class="input input-sm sm:input-md input-bordered input-primary w-full max-w-sm"
23 |         >
24 |         <TaskModal />
25 |       </div>
26 | 
27 |       <div class="flex justify-center space-x-2">
28 |         <button
29 |           class="btn btn-sm sm:btn-md sm:w-32"
30 |           :class="{ 'btn-primary': showTaskType === 'all' }"
31 |           @click="showTaskType = 'all'"
32 |         >
33 |           All
34 |         </button>
35 |         <button
36 |           class="btn btn-sm sm:btn-md sm:w-32"
37 |           :class="{ 'btn-primary': showTaskType === 'completed' }"
38 |           @click="showTaskType = 'completed'"
39 |         >
40 |           Completed
41 |         </button>
42 |         <button
43 |           class="btn btn-sm sm:btn-md sm:w-32"
44 |           :class="{ 'btn-primary': showTaskType === 'inprogress' }"
45 |           @click="showTaskType = 'inprogress'"
46 |         >
47 |           Todos
48 |         </button>
49 |       </div>
50 | 
51 |       <div ref="parent" class="space-y-3 overflow-hidden">
52 |         <Suspense>
53 |           <!-- component with nested async dependencies -->
54 |           <Tasks
55 |             :show-task-type="showTaskType"
56 |             :search-text="searchText"
57 |           />
58 | 
59 |           <!-- loading state via #fallback slot -->
60 |           <template #fallback>
61 |             <p class="text-xl sm:text-3xl text-center mt-20">
62 |               Loading...
63 |             </p>
64 |           </template>
65 |         </Suspense>
66 |       </div>
67 |     </div>
68 |   </div>
69 | </template>
70 | 


--------------------------------------------------------------------------------
/src/components/Navbar.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { getAuth, signOut } from 'firebase/auth'
 3 | import { computed } from 'vue'
 4 | import { useRoute, useRouter } from 'vue-router'
 5 | import { useCurrentUser } from 'vuefire'
 6 | 
 7 | const user = useCurrentUser()
 8 | const router = useRouter()
 9 | const route = useRoute()
10 | 
11 | const isLoading = computed(() => user.value === undefined)
12 | 
13 | const isRoot = computed(() => (route.fullPath === '/'))
14 | 
15 | const onLogoutClick = () => {
16 |   const auth = getAuth()
17 |   signOut(auth)
18 |     .then(() => {
19 |       // Sign-out successful.
20 |       router.push('/')
21 |     })
22 |     .catch((error) => {
23 |       // An error happened.
24 |       // eslint-disable-next-line no-alert
25 |       alert(error.message)
26 |     })
27 | }
28 | </script>
29 | 
30 | <template>
31 |   <header class="border-b border-base-300">
32 |     <div class="container max-w-4xl mx-auto navbar">
33 |       <div class="navbar-start">
34 |         <RouterLink
35 |           to="/"
36 |           class="btn btn-ghost normal-case text-xl"
37 |           :class="{ 'text-primary': isRoot }"
38 |         >
39 |           Home
40 |         </RouterLink>
41 |         <RouterLink
42 |           v-if="user"
43 |           to="/dashboard"
44 |           class="btn btn-ghost normal-case text-xl"
45 |           :class="{ 'text-primary': !isRoot }"
46 |         >
47 |           Dashboard
48 |         </RouterLink>
49 |       </div>
50 |       <div class="navbar-end">
51 |         <button v-if="isLoading" class="btn btn-circle btn-primary btn-disabled">
52 |           <span class="loading loading-spinner" />
53 |         </button>
54 |         <div v-else-if="user" class="dropdown dropdown-end">
55 |           <label tabindex="0" class="btn btn-ghost ring-2  btn-circle avatar">
56 |             <div class="w-10 rounded-full">
57 |               <img alt="Profile Image" :src="user?.photoURL || '/default-man.jpg'">
58 |             </div>
59 |           </label>
60 |           <ul tabindex="0" class="menu menu-sm bg-base-300 dropdown-content mt-3 z-[1] p-2 shadow  rounded-box w-52">
61 |             <li @click="onLogoutClick">
62 |               <a class="justify-between">
63 |                 Log Out
64 |               </a>
65 |             </li>
66 |           </ul>
67 |         </div>
68 |         <RouterLink v-else-if="!user && route.fullPath !== '/signin' " to="/signin" class="btn btn-primary">
69 |           SignIn
70 |         </RouterLink>
71 |       </div>
72 |     </div>
73 |   </header>
74 | </template>
75 | 


--------------------------------------------------------------------------------
/src/components/TaskModal.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { defineAsyncComponent, ref } from 'vue'
 3 | import { addDoc, collection } from 'firebase/firestore'
 4 | import { getCurrentUser, useFirestore } from 'vuefire'
 5 | 
 6 | const Close = defineAsyncComponent(() => import('@/components/svg/Close.vue'))
 7 | 
 8 | const title = ref('')
 9 | const des = ref('')
10 | const stat = ref('inprogress')
11 | const isCreating = ref(false)
12 | const showModal = ref(false)
13 | 
14 | const createTaks = async () => {
15 |   if (title.value) {
16 |     try {
17 |       isCreating.value = true
18 | 
19 |       const user = await getCurrentUser()
20 |       const db = useFirestore()
21 | 
22 |       const obj = {
23 |         title: title.value,
24 |         description: des.value,
25 |         type: stat.value,
26 |       }
27 |       await addDoc(
28 |         collection(db, `users/${user?.uid}/todos`),
29 |         obj,
30 |       )
31 | 
32 |       title.value = ''
33 |       des.value = ''
34 |       showModal.value = false
35 |     }
36 |     catch (error) {
37 |       console.log(error)
38 |     }
39 | 
40 |     isCreating.value = false
41 |   }
42 | }
43 | </script>
44 | 
45 | <template>
46 |   <div>
47 |     <!-- The button to open modal -->
48 |     <label
49 |       for="my-modal"
50 |       class="btn btn-sm sm:btn-md btn-primary w-28"
51 |       @click="showModal = true"
52 |     >
53 |       New Task
54 |     </label>
55 | 
56 |     <!-- Put this part before </body> tag -->
57 |     <div class="modal" :class="{ 'modal-open': showModal }">
58 |       <div class="modal-box">
59 |         <div class="flex justify-between">
60 |           <h3 class="font-bold text-lg">
61 |             Create New Task
62 |           </h3>
63 |           <button
64 |             class="btn btn-circle btn-primary btn-sm btn-outline"
65 |             @click="showModal = false"
66 |           >
67 |             <Close />
68 |           </button>
69 |         </div>
70 | 
71 |         <div class="py-4 flex flex-col space-y-3">
72 |           <input
73 |             v-model="title"
74 |             type="text"
75 |             placeholder="Title"
76 |             class="input input-bordered input-primary w-full"
77 |           >
78 |           <input
79 |             v-model="des"
80 |             type="text"
81 |             placeholder="Desscription"
82 |             class="input input-bordered input-primary w-full"
83 |           >
84 |         </div>
85 |         <div class="flex justify-end">
86 |           <button
87 |             class="btn btn-primary"
88 |             :class="{ loading: isCreating }"
89 |             @click="createTaks"
90 |           >
91 |             Button
92 |           </button>
93 |         </div>
94 |       </div>
95 |     </div>
96 |   </div>
97 | </template>
98 | 


--------------------------------------------------------------------------------
/src/components/TaskCard.vue:
--------------------------------------------------------------------------------
  1 | <script setup lang="ts">
  2 | import { computed, defineAsyncComponent, ref } from 'vue'
  3 | import { deleteDoc, doc, setDoc } from 'firebase/firestore'
  4 | import { getCurrentUser, useFirestore } from 'vuefire'
  5 | 
  6 | const props = withDefaults(defineProps<Prpos>(), {
  7 |   title: 'No Task Available',
  8 |   description: 'No description available',
  9 |   type: 'inprogress',
 10 |   id: '',
 11 | })
 12 | 
 13 | const Delete = defineAsyncComponent(() => import('@/components/svg/Delete.vue'))
 14 | 
 15 | interface Prpos {
 16 |   title: string
 17 |   description: string
 18 |   type: string
 19 |   id: string
 20 | }
 21 | 
 22 | const isOperationActive = ref(false)
 23 | 
 24 | const isChecked = computed(() => props.type === 'completed')
 25 | 
 26 | const onClicked = async () => {
 27 |   try {
 28 |     isOperationActive.value = true
 29 | 
 30 |     const db = useFirestore()
 31 |     const user = await getCurrentUser()
 32 | 
 33 |     const newType = props.type === 'completed' ? 'inprogress' : 'completed'
 34 | 
 35 |     const obj = {
 36 |       title: props.title,
 37 |       description: props.description,
 38 |       type: newType,
 39 |     }
 40 | 
 41 |     const todoRef = doc(db, `users/${user?.uid}/todos`, props.id)
 42 |     setDoc(todoRef, obj, { merge: true })
 43 |   }
 44 |   catch (error) {
 45 |     console.log(error)
 46 |   }
 47 |   isOperationActive.value = false
 48 | }
 49 | 
 50 | const onDeleteClick = async () => {
 51 |   try {
 52 |     isOperationActive.value = true
 53 | 
 54 |     const db = useFirestore()
 55 |     const user = await getCurrentUser()
 56 | 
 57 |     await deleteDoc(doc(db, `users/${user?.uid}/todos`, props.id))
 58 |   }
 59 |   catch (error) {
 60 |     console.log(error)
 61 |   }
 62 |   isOperationActive.value = false
 63 | }
 64 | </script>
 65 | 
 66 | <template>
 67 |   <div
 68 |     class="flex bg-base-300 justify-between items-center cursor-pointer px-5 py-5 rounded-md space-x-3"
 69 |     @click="onClicked"
 70 |   >
 71 |     <div>
 72 |       <h1
 73 |         class="text-base md:text-2xl font-semibold"
 74 |         :class="{ 'line-through': isChecked }"
 75 |       >
 76 |         {{ title }}
 77 |       </h1>
 78 |       <p
 79 |         class="mt-2 text-xs md:text-base"
 80 |         :class="{ 'line-through': isChecked }"
 81 |       >
 82 |         {{ description }}
 83 |       </p>
 84 |     </div>
 85 |     <div class="flex space-x-2 items-end">
 86 |       <button
 87 |         v-if="isOperationActive"
 88 |         class="btn btn-square btn-xs btn-primary loading"
 89 |       />
 90 |       <button
 91 |         v-if="isChecked && !isOperationActive"
 92 |         class="btn btn-square btn-xs btn-error"
 93 |         @click.stop="onDeleteClick"
 94 |       >
 95 |         <Delete />
 96 |       </button>
 97 |       <input
 98 |         v-if="!isOperationActive"
 99 |         type="checkbox"
100 |         :checked="isChecked"
101 |         class="checkbox checkbox-primary"
102 |       >
103 |     </div>
104 |   </div>
105 | </template>
106 | 


--------------------------------------------------------------------------------
/src/views/SigninView.vue:
--------------------------------------------------------------------------------
  1 | <script setup lang="ts">
  2 | import {
  3 |   GoogleAuthProvider,
  4 |   getAuth,
  5 |   isSignInWithEmailLink,
  6 |   sendSignInLinkToEmail,
  7 |   signInWithEmailLink,
  8 |   signInWithPopup,
  9 | } from 'firebase/auth'
 10 | import { useRouter } from 'vue-router'
 11 | import { defineAsyncComponent, onMounted, ref, watch } from 'vue'
 12 | 
 13 | const Google = defineAsyncComponent(() => import('@/components/svg/Google.vue'))
 14 | const Info = defineAsyncComponent(() => import('@/components/svg/Info.vue'))
 15 | 
 16 | const provider = new GoogleAuthProvider()
 17 | 
 18 | const auth = getAuth()
 19 | const router = useRouter()
 20 | 
 21 | const email = ref('')
 22 | const sentMail = ref(false)
 23 | const errorMsg = ref('')
 24 | const showProcessing = ref(false)
 25 | 
 26 | // For Local Dev -> url: 'http://localhost:5173/signin',
 27 | const actionCodeSettings = {
 28 |   url: 'https://vuefire-todos.netlify.app/signin',
 29 |   handleCodeInApp: true,
 30 | }
 31 | 
 32 | const googleSignIn = () => {
 33 |   signInWithPopup(auth, provider)
 34 |     .then(() => {
 35 |       router.push('/dashboard')
 36 |     })
 37 |     .catch((error) => {
 38 |       const errorCode = error.code
 39 |       if (errorCode === 'auth/invalid-email')
 40 |         errorMsg.value = 'Invalid Email'
 41 |     })
 42 | }
 43 | 
 44 | const sentEmailForVerify = () => {
 45 |   if (email.value.length >= 5) {
 46 |     showProcessing.value = true
 47 |     sendSignInLinkToEmail(auth, email.value, actionCodeSettings)
 48 |       .then(() => {
 49 |         window.localStorage.setItem('emailForSignIn', email.value)
 50 |         sentMail.value = true
 51 |         showProcessing.value = false
 52 |       })
 53 |       .catch((error) => {
 54 |         showProcessing.value = false
 55 |         const errorCode = error.code
 56 |         if (errorCode === 'auth/invalid-email')
 57 |           errorMsg.value = 'Invalid Email'
 58 |       })
 59 |   }
 60 | }
 61 | 
 62 | // clean error msg when email change
 63 | watch(email, () => {
 64 |   errorMsg.value = ''
 65 |   sentMail.value = false
 66 | })
 67 | 
 68 | onMounted(() => {
 69 |   // Confirm the link is a sign-in with email link.
 70 |   if (isSignInWithEmailLink(auth, window.location.href)) {
 71 |     showProcessing.value = true
 72 | 
 73 |     let email = window.localStorage.getItem('emailForSignIn') || ''
 74 | 
 75 |     if (!email) {
 76 |       // eslint-disable-next-line no-alert
 77 |       email = window.prompt('Please provide your email for confirmation') || ''
 78 |     }
 79 |     signInWithEmailLink(auth, email, window.location.href)
 80 |       .then(() => {
 81 |         // Clear email from storage.
 82 |         showProcessing.value = false
 83 |         window.localStorage.removeItem('emailForSignIn')
 84 |         router.push('/dashboard')
 85 |       })
 86 |       .catch((error) => {
 87 |         showProcessing.value = false
 88 |         const errorCode = error.code
 89 |         if (errorCode === 'auth/invalid-email')
 90 |           errorMsg.value = 'Invalid Email'
 91 |       })
 92 |   }
 93 | })
 94 | </script>
 95 | 
 96 | <template>
 97 |   <div class="container max-w-7xl h-full mx-auto">
 98 |     <div class="flex justify-center h-full items-center">
 99 |       <div class="space-y-4 p-10 m-5 rounded-lg shadow-md bg-neutral text-neutral-content">
100 |         <div>
101 |           <h1 class="text-4xl text-center font-bold">
102 |             Welcome !
103 |           </h1>
104 |           <p class="text-sm text-center pb-5 pt-2">
105 |             Start Your Journey With Vuefire Todo
106 |           </p>
107 |         </div>
108 |         <input
109 |           v-model="email"
110 |           type="email"
111 |           placeholder="Enter Your Email"
112 |           class="input input-bordered input-primary w-full max-w-xs"
113 |         >
114 |         <br>
115 |         <button
116 |           class="btn btn-primary w-full"
117 |           :class="{ loading: showProcessing === true }"
118 |           @click="sentEmailForVerify"
119 |         >
120 |           Sign In
121 |         </button>
122 |         <br>
123 |         <button
124 |           class="btn btn-primary w-full  gap-1"
125 |           @click="googleSignIn"
126 |         >
127 |           <span class="pr-2">Sign In With</span>
128 |           <Google class="w-3" />
129 |         </button>
130 |         <div v-if="sentMail" class="alert alert-info shadow-lg">
131 |           <div class="flex space-x-1 justify-center items-center">
132 |             <Info />
133 |             <span>Check mailbox for login link</span>
134 |           </div>
135 |         </div>
136 |         <div v-if="errorMsg.length > 1" class="alert alert-error shadow-lg">
137 |           <div class="flex space-x-1 justify-center items-center">
138 |             <Info />
139 |             <span>{{ errorMsg }}</span>
140 |           </div>
141 |         </div>
142 |       </div>
143 |     </div>
144 |   </div>
145 | </template>
146 | 


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