https://github.com/techmely/vue3-practice-course
Project vận dụng Vue 3 để làm các projec theo ý muốn của bạn!
https://github.com/techmely/vue3-practice-course
ai buildinpublic claude-ai coderabbit cursor firebase-auth framer-motion pinia techmely tutorial vue3 zod-validation
Last synced: 3 months ago
JSON representation
Project vận dụng Vue 3 để làm các projec theo ý muốn của bạn!
- Host: GitHub
- URL: https://github.com/techmely/vue3-practice-course
- Owner: techmely
- Created: 2024-08-19T01:04:19.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-02-24T04:25:19.000Z (8 months ago)
- Last Synced: 2025-02-24T05:27:38.262Z (8 months ago)
- Topics: ai, buildinpublic, claude-ai, coderabbit, cursor, firebase-auth, framer-motion, pinia, techmely, tutorial, vue3, zod-validation
- Language: HTML
- Homepage: https://www.youtube.com/playlist?list=PLwJIrGynFq9BwVv-zl8OUVekY-7mcABww
- Size: 2.41 MB
- Stars: 0
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.en.md
Awesome Lists containing this project
README
# Techmely Vue3 Academy - Free youtube
Thank [hieuhani](https://github.com/hieuhani) for [techgoda](https://github.com/hieuhani/techgoda) project & [publiz](https://github.com/hieuhani/publiz) API for me do this course.
## **We cover the fundamentals, like:**
- Setting up Vue 3 project using Vite
- Integrating VueDevTools with Vue js 3
- Routing with Vue Router and File Based Routing with unplugin-vue-router
- Vue Component and Composable Design with the Composition API
- State management with Pinia
- Modern Javascript (ES2023/ESNext)
- User permissions & Route Guards
- Data and File Storage, plus Authentication with Firebase
- Automatic code review with CodeRabbit
- Linting/Formatting with ESLint + Prettier
- Consuming REST APIs
- Application architecture and best practices
- Error handling and monitoring
## **We also dive into practical real world features and how to implement them quickly:**
- Using OpenAI with some prompts to get some key take-aways from articles.
- Robust and beautiful components with TailwindCSS and ShadCN Vue
- Data filtering and searching strategies across multiple resources (articles, jobs, tags)
- Forms and Validation with Autoform + Zod
- Auto saving on edits to inline content
- Pagination and Infinite scroll support
- Real time commenting
- Analytics and events tracking with Google Analytics 4, Google Tag Manager, and Sentry.
## **Vuejs API we will use**
### **Global & General API**
- [app.directive](https://vuejs.org/api/application.html#app-directive)
- [app.provide](https://vuejs.org/api/application.html#app-provide)
- [app.config.errorHandler](https://vuejs.org/api/application.html#app-config-errorhandler)
- [app.config.performance](https://vuejs.org/api/application.html#app-config-performance)
- [nexttick](https://vuejs.org/api/general.html#nexttick)
- [defineComponent](https://vuejs.org/api/general.html#definecomponent)
- [defineProps & defineEmits](https://vuejs.org/api/sfc-script-setup.html#defineprops-defineemits)
- [defineExpose](https://vuejs.org/api/general.html#defineexpose)
### **Composition API**
- [ref](https://vuejs.org/api/reactivity-core.html#ref)
- [reactive](https://vuejs.org/api/reactivity-core.html#reactive)
- [computed](https://vuejs.org/api/reactivity-core.html#computed)
- [watchEffect](https://vuejs.org/api/reactivity-core.html#watcheffect)
- [watch](https://vuejs.org/api/reactivity-core.html#watch)
- [effectScope](https://vuejs.org/api/reactivity-advanced.html#effectscope)
- [Lifecycle Hooks](https://vuejs.org/api/composition-api-lifecycle.html)
- [Dependency Injection](https://vuejs.org/api/composition-api-dependency-injection.html)
By completing the Vue 3 Techmely, you will be able to land any Vue.js related job or optimize/improve your own projects!
Requirements You should be familiar with JavaScript, HTML, basic CSS, and have fundamental knowledge of Vue.js (specifically with the Composition API).
You could check out our Vuejs courses for FREE: https://www.youtube.com/watch?v=Vg9n_YRGPIY&list=PLwJIrGynFq9B_BQJZJi-ikWDDkYKVUpM5
## Project Setup
```sh
bun i
```
### Compile and Hot-Reload for Development
```sh
bun run dev
```
### ENV Variables
Make sure to provide the env variables listed in the `.env.example` file along with their values.
```
```