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 serveris 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 sarnanevad serveri visualiseeritud veebilehtedega, kuid suureks erinevuseks on asjaolu, 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.
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 vahemikus 0–100% määratud ajaga.
Nuxti komponendid.
Nuxt.js sisaldab järgmisi 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-ist tuntud sildiga, 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 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 kuvada liikudes ühelt alamlehelt teisele.