Vue.js je skvělý framework na vytváření webových komponent a single page aplikací, ale na vytvoření celého webu nestačí. Vue aplikace se načítá pomalu v prohlížeči a „navenek“ (pro vyhledávače) se tváří jako prázdná stránka HTML s jedním JS skriptem, který „namontuje“ Vue aplikaci do elementu <div id=“app“></div>. Je to funkční řešení, Vue aplikace se při procházení webu postará sama o zobrazení obsahu z jediné stránky bez načítání dalších html stránek.
U větších projektů bude ten jeden Javascript soubor obrovský (bundle nad 400 kB už to je problém) a musí se nadělovat do menších, aby se zrychlilo prvotní načtení stránky. To je přece práce, o kterou by se mohl postarat framework ne ? Proč čekat na načtení velkého množství Javascriptů do prohlížeče a následné zpracování ? Server si s tím poradí lépe. Přesněji řečeno renderování obsahu na straně serveru.
Renderování na serveru se dá řešit ručně např. pomocí serverového PHP modulu V8js, ale musí se přitom nastavit spousta věcí, např. asynchronní načítání dat je problém. Lepší je použít bojem prověřený framework i za cenu, že budeme zase o něco závislejší. Nuxt.js je Vue verze frameworku Next.js pro React. Takže to není pouze Vue řešení, to je dobrý předpoklad pro další rozvoj. Snad nebudeme muset za pár let všechno přepisovat z Nuxt.js do něčeho jiného.
Co je to Nuxt.js
Nuxt.js je javascript framework nadřazený frameworku Vue.js. Proč používat framework Nuxt na framework Vue ?
Nuxt.js především zjednodušuje vývoj Vue aplikací, řeší adresářovou strukturu (rozdělení assets souborů pro minifikaci, kompresi a static souborů bez nutnosti úprav), SSR a univerzální aplikace spustitelné na straně serveru i na straně klienta – SEO řešení).
Nuxt umí vygenerovat statickou verzi stránek (nuxt generate) ! Pro takový web potom není potřeba server, stačí ho nahrát na nějaký hosting např. Amazon S3.
Nuxt kompiluje kód napsaný v ES6 (arrow functions, string templates…) a také ES7 (async functions místo několikanásobného zanořování callback funkcí a ošetřování chyb) do funkční verze na starších prohlížečích bez nutnosti něco nastavovat v babel, webpacku.
10 důvodů proč použít Nuxt.js na vývoj nové aplikace
Tipy, triky, návody Nuxt.js
Video kurz Nuxt.js na udemy.com
Instalace Nuxt.js
Na vytváření projektu v Nuxt.js existuje nástroj podobný Vue CLI, který za nás vytvoří adresářovou strukturu projektu a navíc nás nechá zvolit, jaký budeme chtít používat správce modulů npm nebo yarn, jaký chceme UI framework (Bootstrap Vue, Vuetify atd.), jaký chceme použít server pro renderování (výchozí nuxt, express, koa, adonis, hapi, feathers, micro atd.).
npm install -g create-nuxt-app