Nuxt.js

Nuxt.js on võimas ja kergekaaluline Vue.js raamistik, millega saab luua universaalseid ja serveri poolt visualiseeritud veebirakendusi. Nuxt.js-i lõid Alex Chopin ja Sébastien Chopin tuginedes Next-ile, mis on React-i SSR (Server Side Rendering) raamistik. Nuxt.js esimene versioon(1.0) tehti avalikuks jaanuaris 2018. Kuigi Nuxt.js on peamiselt mõeldud universaalsete ja serveri poolt visualiseeritud veebirakenduste loomiseks, saab sellega ka luua staatilisi veebilehti, kasutades sama koodibaasi.

Funktsioonid

Visualiseerimine 
Nuxt.js võimaldab luua nii serveri poolt visualiseeritud veebilehti kui ka staatilisi veebilehti, mis visualiseeritakse veebilehe loomisel. Serveri poolne visualiseerimine eeldab serveri olemasolu ja visualiseerib iga kasutaja uue alamlehe päringu peale alamlehe uuesti. Staatilised veebilehed on väga sarnased serveri poolt visualiseeritud veebilehtedega, kuid suureks erinevuseks on fakt, et staatiliste veebilehtede puhul toimub visualiseerimine veebilehe loomise käigus ning serveri olemasolu ei ole vajalik, et navigeerida ühelt alamlehelt teisele. Vaikeseadetes on serveri poolne visualiseerimine aktiveeritud ning seda saab muuta seades muutuja “ssr” vääraks.

Marsruutimine 
Nuxt.js genereerib automaatselt vue-router konfiguratsiooni lähtudes .vue failidest, mis on loodud pages kataloogi. Et liikuda erinevate alamlehtede vahel, mis on pages kataloogis ei ole vaja luua mingeid konfiguratsioone (need genereeritakse automaatselt) ning tuleb kasutada Nuxt-link komponenti. Nuxt.js võimaldab luua ka dünaamilisi ja pesastatud marsruute.

Andmete pärimine 
Nuxt.js võimaldab laadida andmeid ka 'mounted' haagiga, mis on omapärane Vue-le. Kuid et laadida universaalse veebirakenduse andmed serveri poolse visualiseerimise käigus tuleb kasutada Nuxt.js-ile omaseid haake nagu 'fetch' või 'asyncData'.

Metasildid ja SEO 
Nuxt.js võimaldab metasilte veebilehele lisada kolmel viisil.

 Globaalselt kasutades faili nuxt.config.js. See on kasulik, et lisada vaikimisi metaandmed veebilehe kõikidele alamlehtedele. Näiteks veebilehe pealkiri ja kirjeldus.
 Lokaalselt kasutades <head> silti. Kasutades <head> silti saab lisada metaandmeid konkreetsele alamlehele
 Lokaalselt kasutades <head> silti funktsioonina. See variant võimaldab lisada metaandmeid konkreetsele alamlehele ja kasutatavad on ka Nuxt.js objektid “data” ja “computed”.

Konfiguratsioon 
Konfiguratsioonifailis (nuxt.config.js) saab muuta Nuxt.js vaikeseadeid.

Laadimine 
Nuxt.js annab võimaluse kasutada laadimisnäidikut, mida kuvatakse kasutajale marsruutimise ajal ehk ühelt alamlehelt teisele minnes. Laadimisnäidikut saab muuta ja selle saab ka vajadusel ka eemaldada. Laadimisnäidikul saab muuta värvi, ebaõnnestumisvärvi, kõrgust, kestvust, css-i, suunda, püsivust ja viivutus aega. Kuna uue alamlehe laadimisaega ei ole võimalik ette teada ei ole ka võimalik täpselt animeerida laadimisnäidikut. Selle vastu aitab kohandatud laadimisaja määramine, kuna laadimisnäidik liigub alati 0%-st kuni 100%-ni määratud ajaga.

Nuxt komponendid 
Nuxt.js sisaldab järgevaid komponente, mida saab veebilehel kasutada: Nuxt, Nuxt-child, Nuxt-link ja Client-only. Nuxt komponenti saab kasutada vaid paigutus komponendis ja seda kasutatakse, et kuvada alamlehe komponendid, sõltuvalt sellest, millist alamlehte kuvatakse. Nuxt-child komponent on vajalik, et kuvada ühte alamlehte teises alamlehes. Liikumaks ühelt alamlehelt teisele on vaja kasutada Nuxt-link komponenti. Nuxt-link komponent töötab sarnaselt HTML-st tuntud <a> sildile, kuid et liikuda alamlehele “/meist” tuleb argumendiks anda “to=’/meist” mitte “href=’/meist’”. Kõik veebilehesisesed lingid ühelt alamlehelt teisele liikumiseks peaksid kasutama Nuxt-link komponenti ja lingid teistele veebilehtedele peaksid kasutama <a> silti. Client-side komponenti kasutatakse, et visualiseerida mingit osa veebilehest ainult kliendipoolselt ja mitte serveris.

Üleminekud 
Nuxt.js võimaldab luua üleminekuid/animatsioone, mida saab kuvad liikudes ühelt alamlehelt teisele.

Kataloogi struktuur 

 Assets kataloog sisaldab mittekompileeritud faile, nagu pildid, Sass failid ja fondid. Assets kataloogi faile saab kasutada komponentides või CSS-is kasutades faili URL-i. Nuxt.js kasutab Webpacki, et töödelda ja käsitseda assets kataloogi faile.
 Components sisaldab komponente, mis on iseseisvad ja taaskasutatavad koodijupid. Komponendid on .vue failid, mida saab kasutada alamlehtedes ja teistes komponentides.
 Layouts failid layout kataloogis võimaldavad luua erinevaid paigutusi alamlehtedele, mida saab mitmete alamlehtede puhul taaskasutada. Ühel veebilehel võib olla mitu erinevat paigutust. Näiteks mobiili ja tahvelarvuti paigutus.
 Middleware  kaustas saab defineerida erinevaid funktsioone, mida täidetakse enne alamlehtede visualiseerimist. Näiteks saab middleware kaustas defineerida funktsiooni, mis kontrollib kas kasutaja on lubatud alamlehele või mitte, enne kui vastavat alamlehte näidatakse.
 Pages kataloog sisaldab kõiki veebilehe alamlehti ja marsruute.
 Plugins kataloog sisaldab Javascripti pistikprogramme, mida jooksutatakse enne kui luuakse Vue.js rakendus. See on kasulik, et veebilehel saaks kasutada välised JavaScripti mooduleid.
 Static kaust on alternatiiv Webpacki assets kaustale kuhu saab lisada faile, näiteks pilte, mida muudetakse harva (näiteks veebilehe ikoon - favicon.ico).
 Store kaust ei ole vaikimisi aktiveeritud. Et see aktiveerida on on vaja selle sisse luua Javascripti fail(nt index.js). Store kaust võimaldab kontrollida ja hallata veebilehe olekut.
 Nuxt.config.js sisaldab Nuxt.js-i seadeid ja võimaldab neid muuta.

Viited