**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.

1. Globaalselt kasutades faili nuxt.config.js. See on kasulik, et lisada vaikimisi metaandmed veebilehe kõikidele alamlehtedele. Näiteks veebilehe pealkiri ja kirjeldus.
2. Lokaalselt kasutades <head> silti. Kasutades <head> silti saab lisada metaandmeid konkreetsele alamlehele
3. 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
-------------------

1. ***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.
2. ***Components*** sisaldab komponente, mis on iseseisvad ja taaskasutatavad koodijupid. Komponendid on .vue failid, mida saab kasutada alamlehtedes ja teistes komponentides.
3. ***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.
4. ***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.
5. ***Pages*** kataloog sisaldab kõiki veebilehe alamlehti ja marsruute.
6. ***Plugins*** kataloog sisaldab Javascripti pistikprogramme, mida jooksutatakse enne kui luuakse Vue.js rakendus. See on kasulik, et veebilehel saaks kasutada välised JavaScripti mooduleid.
7. ***Static*** kaust on alternatiiv Webpacki *assets* kaustale kuhu saab lisada faile, näiteks pilte, mida muudetakse harva (näiteks veebilehe ikoon - favicon.ico).
8. ***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.
9. ***Nuxt.config.js*** sisaldab Nuxt.js-i seadeid ja võimaldab neid muuta.

Viited
------

1. ↑  "Getting Started with Server-Side Rendering Using Nuxt.js". *digitalocean.com*. 16. aprill 2018. Vaadatud 11.12.2020.
2. ↑  Ben Jones. "Creating Server-side Rendered Vue.js Apps Using Nuxt.js". *toptal.com*. Vaadatud 11.12.2020.
3. ↑  "Rendering". *nuxtjs.org*. Vaadatud 10.12.2020.
4. ↑  "File System Routing". *nuxtjs.org*. Vaadatud 10.12.2020.
5. ↑  "Data Fetching". *nuxtjs.org*. Vaadatud 04.01.2021.
6. ↑  "Meta Tags and SEO". *nuxtjs.org*. Vaadatud 04.01.2021.
7. ↑  "Configuration". *nuxtjs.org*. Vaadatud 10.12.2020.
8. ↑  "Loading". *nuxtjs.org*. Vaadatud 10.12.2020.
9. ↑  "Nuxt Components". *nuxtjs.org*. Vaadatud 10.12.2020.
10. ↑  "Transitions". *nuxtjs.org*. Vaadatud 10.12.2020.
11. ↑  "NuxtJs Directory Structure". *nuhuibrahim.com*. Originaali arhiivikoopia seisuga 8.01.2021. Vaadatud 11.12.2020.