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.

# 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  silti. Kasutades  silti saab lisada metaandmeid konkreetsele alamlehele
# Lokaalselt kasutades  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 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.

## 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 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