Nuxt2 min čítania
Štruktúra Nuxt/Vue projektu bez chaosu
Rozdelenie na components, composables, services a server vrstvu.
Bez dohody o štruktúre začne tím po pár sprintoch ukladať logiku kamkoľvek. Článok nastaví jednoduché hranice, ktoré sa dajú dlhodobo dodržať.
Oficiálne zdroje:
Čo si z článku odnesieš
- ako rozdeliť komponenty, composables, services a server API
- kam patri doménová logika a kam iba prezentačné UI
- ako pomenovať súbory, aby sa v projekte dalo rýchlo orientovať
Praktický postup
- Zaveď doménové priečinky (napr.
users,billing,content) namiesto jedného veľkého „utils“. - UI komponenty nech sú bez API volaní; API daj do
servicesalebo server route. - Composables používaj pre zdieľaný stav a opakované flow, nie ako odkladisko všetkého.
- V PR kontroluj, či nová funkcionalita rešpektuje hranice vrstiev.
Príklad z praxe
app/
components/
composables/
services/
pages/
server/
api/
utils/Ako overíš, že je to správne
- Náhodne vyber 3 komponenty a over, že v nich nie je priame API volanie.
- Skontroluj, že composable neobsahuje prezentačné HTML rozhodnutia.
- Spusť celý quality gate cez npm skripty.
Najčastejšie chyby
- mix business pravidiel priamo v SFC komponente,
- nekonzistentné názvy typu
helpers2,newUtils,temp, - všetko v jednej vrstve bez jasného vlastníka.
Mini úloha
- Vyber jednu funkciu a presuň ju z komponentu do composable alebo service.
- Premenuj aspoň dva nejasné súbory na doménové názvy.
- Doplň krátku sekciu architektúry do README.
Čo bude ďalej
V ďalšom článku: TypeScript strict a vue-tsc v Nuxt/Vue.