Techmely Vue3 Academy - Free Youtube Guide

Cảm ơn hieuhani vì project techgoda & publiz API đã giúp em hoàn thành course này.

Danh sách video

• Bài 1: Setup và overview project sẽ build
• Bài 2: Setup Firebase Authentication & Tanstack Vue Query ️
• Bài 3: Dựng UI Home Page = v0 AI, mock API với Service Worker
• Bài 4: Cập nhật dependencies version, linting, và sử dụng AI để viết unit test
• Bài 5: Member Only [Trace app performance, handle global error, capture analytics events]
• Bài 6: Member Only [Tạo/Viết/Sửa/Xóa bài viết với Tiptap, Mock Service Worker và FakerJs]
• Bài 7: Member Only [Search + tóm tắt bài viết với Vue Query và OpenAI]
• Bài 8: Member Only [Deploy project với Vercel và Cloudflare]

We cover the fundamentals, like:

• Dựng base project với Vue 3 sử dụng Vite
• Tích hợp VueDevTools
• Routing với Vue Router và File Based Routing với unplugin-vue-router
• Vue Component và Composable Design với Composition API
• Query/Mutate dữ liệu với Vue Query + Ky
• State management với Pinia
• Dùng Modern Javascript (ES2023/ESNext)
• User permissions & Route Guards
• Data và File Storage, cộng với Authentication với Firebase
• Tự động code review bằng CodeRabbit AI
• Linting/Formatting với ESLint + Prettier
• Consuming REST APIs
• Vận dụng các kiến thức thực tế trong dự án
• Error handling và monitoring với Sentry
• Write the unit test with Vitest + Testing Library
• Write e2e test with Playwright

Cùng nhau làm các tính năng trong thực tế một cách nhanh chóng:

• Sử dụng OpenAI với một vài prompts để lấy các thông tin tóm tắt quan trọng của bài viết, bài tìm việc...
• Sử dụng các component tích hợp sẵn và đẹp mắt với TailwindCSS và ShadCN Vue
• Lọc/Tìm kiếm dữ liệu với danh sách bài viết, bài đăng công việc, tags
• Forms và Validation với Autoform + Zod
• Tự động lưu bài viết trong quá trình viết nội dung
• Analytics và events tracking với Google Analytics 4, Google Tag Manager, và Sentry tracking error.

VueJs API ta sẽ xử dụng

Global & General API

• app.directive
• app.provide
• app.config.errorHandler
• app.config.performance
• nexttick
• defineComponent
• defineProps & defineEmits
• defineExpose

Composition API

• ref
• reactive
• computed
• watchEffect
• watch
• effectScope
• Lifecycle Hooks
• Dependency Injection

Khi hoàn thành khoá học Vue3 của Techmely, bạn sẽ có khẳ năng tìm được công việc với VueJs ngoài thực tế bởi những kiến thức, kỹ năng được chia sẻ trong khoá học.

Khoá học yêu cầu bạn nên có nên tảng cơ bản với Javascript, HTML, CSS và đặc biệt là kiến thức cơ bản về VueJs(đặc biệt là Composition API).

Bạn có thể xem qua khoá VueJs của Techmely FREE trên kênh Youtube của team

Project Setup

Lưu ý: Bạn phải cài bun trước

# Nếu bạn là Linux/MacOs
curl -fsSL https://bun.sh/install | bash

# Nếu bạn dùng window
powershell -c "irm bun.sh/install.ps1 | iex"

bun install

Compile + Hot-Reload cho Development

bun run dev

ENV Variables

Chắc chắn rằng bạn tạo ra 1 file .env chứa các env variables như file .env.example.

cp .env.example .env