Vue 3 + Nuxt β Zero to Hero (o'zbek tilida)¶
Bu qo'llanma Vue 3 (Composition API) va Nuxt 3/4 ni noldan professional darajagacha o'rgatish uchun yozilgan. Har bir modul nazariya + why (nega shunday) + kamida 20 ta masala dan iborat.
Sen backend (Laravel/DDD) tajribasi bor odamsan, shuning uchun ba'zi joylarda Laravel/PHP analogiyalari beriladi β yangi tushunchani eski bilim ustiga "ulash" eng tez o'rganish usuli.
Qanday ishlatish kerak¶
- Modullarni tartib bilan o'q (01 β 02 β ...). Har biri oldingisiga tayanadi.
- Har modul oxiridagi masalalarni o'zing yoz, keyin yechimga qara. Faqat o'qib ketsang β 2 haftada unutasan.
- Har modul uchun alohida
playgroundpapka ochib, kod yozib ko'r: - Masalalarning β belgisi bor yechimi shu faylning oxirida yoki keyingi qatorda beriladi. Belgisiz masalalar β mustaqil mashq (yechimi yo'q, ataylab).
Talablar (prerequisites)¶
| Kerak | Daraja |
|---|---|
JavaScript (ES6+): let/const, arrow fn, destructuring, modules, Promise/async-await, array methods (map/filter/reduce) |
Yaxshi bilish shart |
| HTML/CSS | O'rta |
| Terminal, npm | Asoslar |
| TypeScript | Shart emas, lekin foydali β yo'l-yo'lakay o'rganamiz |
Agar JS'ning yuqoridagilarini yaxshi bilmasang β avval o'shani mustahkamla, aks holda Vue'da qiynalasan. Vue qiyin emas, JS zaif bo'lsa qiyin tuyuladi.
To'liq dastur (roadmap)¶
I qism β Vue 3 yadrosi¶
| β | Modul | Nima o'rganasan |
|---|---|---|
| 01 | Vue asoslari va template syntax | Vue nima, SFC, Vite, direktivalar, v-bind/v-if/v-for/v-on |
| 02 | Reactivity | ref, reactive, computed, watch, watchEffect, reaktivlik ichki mexanizmi |
| 03 | Komponentlar | props, emits, slots, v-model, provide/inject |
| 04 | Composition API & Composables | Lifecycle, composable yozish, advanced reactivity, <script setup> chuqur |
| 05 | Vue Router | Routing, nested routes, guards, lazy loading |
| 06 | Pinia (state management) | Store, actions, getters, plugins, persist |
II qism β Nuxt¶
| β | Modul | Nima o'rganasan |
|---|---|---|
| 07 | Nuxt asoslari | Setup, file-based routing, layouts, auto-imports, app.vue |
| 08 | Data fetching & Server (Nitro) | useFetch, useAsyncData, $fetch, server API, middleware, useState |
III qism β Nuxt UI (komponentlar kutubxonasi)¶
| β | Modul | Nima o'rganasan |
|---|---|---|
| 09 | Nuxt UI: asoslar va theming | O'rnatish, UApp, design system (color/variant/size), 3 qatlamli theming, :ui prop |
| 10 | Nuxt UI komponentlari (to'liq) | 125+ komponent kategoriya bo'yicha: form (Zod), table (TanStack), overlay (useOverlay), dashboard |
Nuxt UI v4 β Nuxt UI va Pro birlashgan, butunlay bepul (
@nuxt/ui), Reka UI + Tailwind v4 asosida. 09 β tizimni tushunish, 10 β har bir komponent.
Yadro to'plam (Vue 100% + Nuxt'ning eng muhim ~70% + Nuxt UI). Hali yozilmagan, so'rasang qo'shiladigan mavzular: rendering modes (SSR/SSG/ISR/hybrid), SEO/meta chuqur, Nitro chuqur (storage/caching), modules ecosystem, testing (Vitest), deployment (VPS/Nginx/Docker), TypeScript chuqur, performance β barchasi shu modullar uslubida.
Vue vs React β bir og'iz (kontekst uchun)¶
Vue va React bir muammoni hal qiladi: UI = f(state). Farqi:
- React β "hammasi JavaScript". JSX, manual re-render optimizatsiya (
useMemo,useCallback). - Vue β template + avtomatik reaktivlik (Proxy asosida). Ko'p narsa "o'zi" optimallashadi. Kamroq boilerplate.
Laravel termini bilan: React β "hamma narsani qo'lda yig'asan", Vue β "framework ko'p ishni convention bilan o'zi qiladi" (Laravel'ning "convention over configuration" falsafasiga yaqin).
Vue ekotizimi xaritasi¶
Vue 3 (core)
βββ Vue Router β sahifalar orasida navigatsiya (SPA)
βββ Pinia β global state (Vuex'ning vorisi)
βββ Vite β build tool / dev server (Webpack vorisi, juda tez)
βββ Nuxt β "Vue uchun Laravel" β fullstack meta-framework
(SSR, routing, server API, auto-import hammasi tayyor)
Tayyor bo'lsang β 01-vue-asoslari.md dan boshla.