Šta je Nuxt.js?

Prvi koraci: Osnove

Ovaj napredni framework zasnovan je na zvaničnim Vue.js bibliotekama (vue, vue-router, veuk) i gore pomenutim razvojnim alatima (Babel, PostCSS, vebpack) kako bi postavio osnovu velikom razvojnom iskustvu omogućavajući profesionalcima da stvore moćne aplikacije vrhunskih performansi.

U osnovi, ovaj framework omogućava developerima da kreiraju tri prepoznatljiva tipa aplikacija, u zavisnosti od namere.

1. Statično generisane stranice (ili pre-renderovanje)

Ovim aplikacijama nisu potrebni API zahtevi za preuzimanje sadržaja stranice, što znači da je većina sadržaja već uključena u samu HML datoteku. Dobar primer statičke veb lokacije je landing stranica proizvoda ili portfolio vebsajt.

2. Aplikacija za jednu stranicu

Uopšteno govoreći, većina JavaScript framework (kao što su Ember.js, Vue, Angular, React) su jenostranične aplikacije sa sadržajem koji je popunjen brzim tranzicijama. Većina ovakvih aplikacija na dobar način koristi API za istoriju HTML5 ili Hash lokacije za svrhe rutiranja.

3. Aplikacije rendorovane od strane servera ili SSR-ovi

Proces generisanja na strani servera je tehnika koju programeri koriste za preuzimanje i prikazivanje podataka na strani klijenta na serveru kako bi klijentu poslali potpuno prikazani „krajnji proizvod“ (tj. stranicu).

Nuxt.js, SPA i SEO

Developeri često imaju tendenciju da se previše brinu zbog SEO-a svojih jenostraničnih aplikacija i njihovog ukupnog učinka na pretraživačima (na primer, blogovi, portfoliji, landing stranice, veb stranice proizvoda na Google-u). U isto vreme, developeri takođe imaju tendenciju da brinu o tome koliko aplikacija prikazana na strani servera može biti složena.

Developeri često grade SPA-ove koristeći JS framework-e, iako ove jenostranične aplikacije izvode dinamičku populaciju sadržaja na stranicama tokom učitavanja. To znači da, kada Google indeksira dotičnu veb lokaciju, njen sadržaj još uvek nedostaje većinu vremena. Ova glavna mana može se delimično rešiti prikazivanjem sadržaja unapred. Ovde u priču ulazi prikazivanje na strani servera i SSR aplikacije, a Vue developeri mogu da prave takve aplikacije pomoću Nuxt.js.

Kreiranje prve Nuxt.js aplikacije

Generalno, postoje dva pravca razmišljanja pri kreiranju Nuxt.js aplikacija.

Ili koristite „create-nuxt-app.“ ili se odlučite da počnete od nule. U ovom konkretnom primeru usredsredićemo se na prvu metodu.

Dakle, za početak već treba da imate instaliran npx. Otvorite terminal i unesite naredbu:

                    
    $ npx create-nuxt-app nuxt-tutorial-app
                    
                

Ili, možete i da idete sa:

                    
    $ yarn create nuxt-app nuxt-tutorial-app
                    
                

Kao što vidite, projektu smo dali ime nuxt-tutorial-app, ali svojoj aplikaciji možete dati bilo koje drugo ime koje želite.

Kada završite s ovim, vreme je da pogledate opcije za konfigurisanje da biste videli šta će vam sve biti potrebno za razvojni projekat.

Kada završite s tim, samo pokrenite sledeću komandu:

                    
    $ cd nuxt-tutorial-app
    $ npm run dev
                    
                

U ovom trenutku, trebalo bi da radite na http://localhost:3000 i trebalo biste biti spremni za development.

O strukturi Nuxt foldera

Ako postavite aplikaciju kao što smo gore pokazali, framework kreira različite foldere i datoteke pomoću kojih ćete obaviti posao. Ovo bi moglo biti pomalo teško za novopridošlice u Nuxt-u i moglo bi ih malo izbaciti iz ravnoteže, pa je najbolje da temeljno pogledate ove foldere i upoznate ih pre nego što nastavimo dalje.

Aseti: ovo je vaša mapa za nekompajlirane datoteke kao što su fontovi, slike, JS datoteke, LESS i SASS. Napravite styles folder i prateću main.css datoteku i kopirajte i nalepite sledeće:

                    
        a {
              text-decoration: none;
              color: inherit;
              cursor: pointer;
        }
        .header {
              width: 100%;
              max-width: 500px;
              margin-left: auto;
              margin-right: auto;
              height: 60px;
              top: 0;
              position: sticky;
              background-color: #fff;
              display: flex;
              justify-content: space-between;
              align-items: center;
        }
        .logo {
              width: 40%;
              max-width: 200px;
              height: 40px;
        }
        .logo .NuxtLogo {
              max-width: 30px;
              margin-left: 10px;
              max-height: 40px;
        }
        .nav {
              width: 60%;
              height: 40px;
              display: flex;
              justify-content: space-between;
              padding-right: 10px;
              max-width: 300px;
        }
        .nav__link {
              width: 80px;
              display: flex;
              align-items: center;
              border-radius: 4px;
              justify-content: center;
              height: 100%;
              border: 1px solid #00c58e;
              cursor: pointer;
        }
        .nav__link:active {
              background-color: #00c58e;
              border: 1px solid #00c58e;
              color: #fff;
              box-shadow: 5px 3px 5px 2px #3f41468c;
        }
        .home {
              padding-top: 30px;
        }
        .home__heading {
              text-align: center;
        }
        .directories {
              display: flex;
              box-sizing: border-box;
              padding: 10px;
              max-width: 1000px;
              margin: 0 auto;
              flex-wrap: wrap;
              justify-content: center;
        }
        @media (min-width: 768px) {
        .directories {
              justify-content: space-between;
        }
        }
        .directory__container {
              width: 100%;
              max-width: 220px;
              cursor: pointer;
              border-radius: 4px;
              border: 1px solid #00c58e;
              display: flex;
              height: 60px;
              margin: 10px 5px;
              margin-right: 0;
              justify-content: center;
              align-items: center;
        }
        .directory__name {
              text-align: center;
        }
        .directory {
              width: 100%;
              margin: 50px auto;
              max-width: 450px;
              border-radius: 4px;
              border: 1px solid #00c58e;
              box-sizing: border-box;
              padding: 10px 0;
        }
        .directory__info {
              padding-left: 10px;
              line-height: 22px;
              padding-right: 10px;
        }
                    
                

Ovo su stilovi koje ćete koristiti u vašoj aplikaciji. Kao što možete videti, postoji nekoliko stilova (na primer, za navigaciju i druge aspekte) koji će biti uključeni u aplikaciju, kako process kreiranja bude napredovao.

Komponente: svi developeri koji su već radili sa Vue.js trebalo bi da budu upoznati sa ovim folderom s obzirom na to da sadrži ponovo upotrebljive komponente koje možete ovde kreirati. Da pokrenete stvari, hajde da kreiramo prvu i nazovemo je, recimo navBar.vue. U našem primeru takođe želimo da traka za navigaciju projekta prikazuje vezu do početne i početne stranice zajedno sa logotipom veb lokacije koji će biti dodat kasnije. Želimo da stvorimo traku koja će biti vidljiva u celoj aplikaciji, a takođe će sadržati neke od stilova o kojima smo već razgovarali gore:

                    
    <template>
        <header class="header">
            <div class="logo">
            <nuxt-link to="/">
            <Logo />
            </nuxt-link>
            </div>
            <nav class="nav">
            <div class="nav__link">
            <nuxt-link to="/">Home</nuxt-link>
            </div>
            <div class="nav__link">
            <nuxt-link to="/About">About</nuxt-link>
            </div>
            </nav>
        </header>
    </template>
    <script>
        import Logo from "@/components/Logo";
        export default {
                  name: "nav-bar",
                  components: {
                    Logo
                }
            };
    </script>
    <style>
    </style>
                    
                

Ono što vidite u template odeljku je ono što će videti i korisnik. Kao što vidite, logo se nalazi u zaglavlju zajedno sa navigacijom.

Layout: ovde je mesto gde skladištite layout-e aplikacija. Oni mogu biti posebno korisni ako pravite aplikaciju kojoj su potrebna najmanje dva različita layout-a. Na primer, jedan za goste, jedan za administratore i jedan za autorizovane korisnike. Dakle, da biste kreirali različite prikaze, otvorite datoteku default.vue dok dodajete komponentu navBar u layout.

                    
    <template>
        <div>
            <Nav />
            <nuxt />
        </div>
    </template>
    <script>
        import Nav from "~/components/navBar.vue";
        export default {
                  components: {
                    Nav
                  }
                };
    </script>
                    
                

Kao što vidite, dodali smo i komponentu Nav unutar layout-a, pazeći da se uvek pojavi na vrhu nakon uvoza u određenu datoteku.

Sledeća komponenta Nav je <nuxt />, koja govori framework-u gde treba da generiše sve svoje rute.

Međuproizvod: ovo je direktorijum odgovoran za smeštanje JS datoteka koje su neophodne pre prikazivanja stranice. Kreira se za datoteke poput Vue.js navigacionog čuvara.

Stranice: još jedan folder sa kojim bi Vue.js developeri već trebalo da budu upoznati. Svaka * .vue datoteka u njemu kreira se kao ruta aplikacije koja im omogućava da istovremeno rade i kao ruteri i pregledači.

Dodaci: ovo je direktorijum u kojem skladištite one datoteke koje bi trebalo da budu pokrenute pre pokretanja root aplikacije Vue.js.

nuxt.config.js: Ovo je datoteka koju koristite za konfigurisanje aplikacije i obično je unapred popunjena na osnovu prethodne konfiguracije koju ste uradili prilikom kreiranja aplikacije. Idealan primer kako bi takva datoteka izgledala bio bi sledeći:

                    
    export default {
      mode: 'universal',
      /*
      ** Headers of the page
      */
      head: {
        title: process.env.npm_package_name || '',
        meta: [
              { charset: 'utf-8' },
              { name: 'viewport', content: 'width=device-width, initial-scale=1' },
              { hid: 'description', name: 'description', content: process.env.npm_package_description || '' }
        ],
        link: [
              { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
        ]
      },
      /*
      ** Customize the progress-bar color
      */
          loading: { color: '#fff' },
      /*
      ** Global CSS
      */
          css: [
      ],
      /*
      ** Plugins to load before mounting the App
      */
          plugins: [
      ],
      /*
      ** Nuxt.js dev-modules
      */
          buildModules: [
      ],
      /*
      ** Nuxt.js modules
      */
          modules: [
      ],
      /*
      ** Build configuration
      */
          build: {
                /*
                ** You can extend webpack config here
                */
                extend (config, ctx) {
                }
      }
    }
                    
                

Svaki put kada izmenite datoteku, aplikacija će se ponovo pokrenuti kako bi odražavala pomenute promene. Budući da to može imati prilično snažan uticaj na aplikaciju, pametno je pregledati svako od ovih svojstava da biste videli šta oni znače.

Režim je vrsta aplikacije koja može biti SPA ili univerzalna. Ako izaberete ovo drugo, moći ćete da kreirate aplikaciju koja radi i na strani klijenta i servera.

Imaćete sva svojstva metatagova zajedno sa linkom favicon u Head tagu.

Učitavanje je podrazumevana komponenta za učitavanje Nuxt.js.

Na kraju, imate i css gde se očekuje da unesete link do vaših globalnih CSS datoteka kako biste omogućili svojoj aplikaciji da ih uzme u obzir prilikom pokretanja. Dodajte link u css datoteku i ponovo pokrenite aplikaciju:

                    
    /*
    ** Global CSS
    */
        css: ["~/assets/styles/main.css"]
                    
                

Još jedno od svojstava je Plugins. Ovde povezujete sve dodatke u direktorijum za aplikaciju. Potrebni su src objekti koji prihvataju putanju do plugin-a zajedno sa režimom, koji konfiguriše da li će aplikacija tretirati pomenuti plugin kao onaj na strani klijenta ili na strani servera. Evo primera:

                    
    { src: '~/plugins/universal-plugin.js' }, // za server i klijent plugin-e
    { src: '~/plugins/client-side.js', mode: 'client' }, // samo za klijent plugin-e
    { src: '~/plugins/server-side.js', mode: 'server' }, // samo za server plugin-e
                    
                

Ovaj korak je ključan jer želite da izbegnete bilo kakve greške na strani klijenta i servera, posebno u slučajevima kada plugin zahteva naredbu localStorage, koja nije dostupna na strani servera. Ako tražite više informacija o datoteci nuxt.config.js, uvek možete da potražite pomoć u zvaničnom dokumentu za konfiguraciju.

Sistem usmeravanja i stranice

Kao što je već rečeno, folder sa stranicama odgovoran je za konfigurisanje ruta u aplikaciji. To znači da će naziv rute zavisiti od naziva datoteka u fascikli. Na primer, ako slučajno imate datoteku about.vue u direktorijumu stranica, u aplikaciji ćete imati i /about rutu. Međutim, ima još toga.

Osnovne rute

To su rute kojima nije potrebna dodatna konfiguracija da bi funkcionisale (setite se direktnih ili kontaktnih ruta). Dakle, ako imate nešto poput ovoga:

                    
    pages/
        --| me/
         -----| index.vue
         -----| about.vue
        --| work.vue
        --| contact.vue
        --| index.vue
        Nuxt will automatically create a router config such as this:
          routes: [
            {
              name: 'index',
              path: '/',
              component: 'pages/index.vue'
            },
            {
              name: 'work',
              path: '/work',
              component: 'pages/work'
            },
            {
              name: 'contact',
              path: '/contact',
              component: 'pages/contact'
            },
            {
              name: 'me',
              path: '/me',
              component: 'pages/me/index.vue'
            },
            {
              name: 'me-about',
              path: '/me/about',
              component: 'pages/me/about.vue'
            }
          ]
        }
                    
                

Sada se ovi putevi mogu jednostavno koristiti za dolazak do njihovih povezanih komponenti. U putanji nema stranica, a Nuxt će obrađivati komponente index.vue kako treba, bez potrebe za dodatnom konfiguracijom.

Ugnežđene rute

Ako želite da napravite ugnežđene rute, prvo treba da dodate novu fasciklu pod nazivom „dashboard“ u folder „pages“ i on bi trebalo da sadrži sve datoteke koje želite da se nestuju u njoj, poput user.vue i setting.vue. Da biste to uradili, samo napravite datoteku dashboard.vue u korenu stranica.

                    
    pages/
         --| me/
         -----| index.vue
         -----| about.vue
         --| dashboard/
         -----| user.vue
         -----| settings.vue
         --| dashboard.vue
         --| work.vue
         --| contact.vue
         --| index.vue
                    
                

Ova akcija bi trebalo da automatski generiše sledeće rute:

                    
    router: {
          routes: [
            {
              name: 'index',
              path: '/',
              component: 'pages/index.vue'
            },
            {
              name: 'work',
              path: '/work',
              component: 'pages/work'
            },
            {
              name: 'contact',
              path: '/contact',
              component: 'pages/contact'
            },

            {
              name: 'me',
              path: '/me',
              component: 'pages/me/index.vue'
            },
            {
              name: 'me-about',
              path: '/me/about',
              component: 'pages/me/about.vue'
            },
            {
              name: 'dashboard',
              path: '/dashboard',
              component: 'pages/dashboard.vue',
              children: [
                {
                  name: 'dashboard-user',
                  path: '/dashboard/user',
                  component: 'pages/dashboard/user.vue'
                },
                {
                  name: 'dashboard-settings',
                  path: '/dashboard/settings',
                  component: 'pages/dashboard/settings.vue'
                }
              ]
            }
          ]
    }
                    
                

Dinamičke rute

To su rute koje treba definisati promenljivom kako bi se nazivale „dinamičkim“. Promenljiva obično može biti ime, broj ili ID preuzet iz podataka klijenta. Ovo može biti zaista sjajno kada trebate raditi sa API-jem gde će ID (id) najverovatnije biti ID stavke iz baze podataka.

Ako koristite Nuxt, trebalo bi da znate da su dinamičke rute definisane dodavanjem _ direktorijumu ili nazivu datoteke u direktorijumu stranica. Kada želite da kreirate dinamičku rutu sa imenom promenjive „id“, samo dodajte datoteku u skladu s tim, a framework će automatski generisati rutu za vas:

                    
    pages/
        --| me/
        -----| index.vue
        -----| about.vue
        -----| _routeName
        -------| index.vue
        -------| info.vue
        --| dashboard/
        -----| user.vue
        -----| settings.vue
        --| dashboard.vue
        --| work.vue
        --| _id.vue
        --| contact.vue
        --| index.vue
                    
                

Ovo će takođe kreirati fajl sa sledećom strukturom ruta:

                    
        {
          name: 'work',
          path: '/work',
          component: 'pages/work'
        },
        {
          name: 'contact',
          path: '/contact',
          component: 'pages/contact'
        },
        {
          name: 'id',
          path: '/:id',
          component: 'pages/_id.vue'
        }
        {
          name: 'me',
          path: '/me',
          component: 'pages/me/index.vue'
        },
        {
          name: 'me-about',
          path: '/me/about',
          component: 'pages/me/about.vue'
        },
        {
          name: 'me-routeName',
          path: '/me/:routeName',
          component: 'pages/me/_routeName/index.vue'
        },
        {
          name: 'me-routeName-info',
          path: '/me/:routeName/info',
          component: 'pages/me/route.vue'
        },
        {
          name: 'dashboard',
          path: '/dashboard',
          component: 'pages/dashboard.vue',
          children: [
            {
              name: 'dashboard-user',
              path: '/dashboard/user',
              component: 'pages/dashboard/user.vue'
            },
            {
              name: 'dashboard-settings',
              path: '/dashboard/settings',
              component: 'pages/dashboard/settings.vue'
            }
          ]
        }
      ]
    }
                    
                

Sada kada smo prešli princip rada struktura ruta u Nuxt-u, vreme je da dodamo stranicu i about.vue rutu. Dodajte sledeći kod:

                    
    <template>
<section class="home">
<h1 class="home__heading">About Nuxtjs Directory Structure</h1>
<div class="directories">
<div class="directory__container" v-for="directory in directories" :key="directory.id">
<p class="directory__name">
<nuxt-link
            :to="{ name: 'id', params: { id: directory.id, dir: directory } }"
>{{ directory.name }}</nuxt-link>
</p>
</div>
</div>
</section>
</template>
<script>
export default {
  name: "about-nuxt",
  data() {
    return {
      directories: [
        {
          id: 0,
          name: "The Assets Directory",
          info:
            "By default, Nuxt uses vue-loader, file-loader and url-loader webpack loaders for strong assets serving.
 You can also use the static directory for static assets. This folder is for un-compiled files such as images, font files,
 SASS, LESS or JavaScript files"
        },
        {
          id: 1,
          name: "The Components Directory",
          info:
            "The components directory contains your Vue.js Components. You can’t use asyncData in these components."
        },
        {
          id: 2,
          name: "The Layouts Directory",
          info:
            "The layouts directory includes your application layouts. Layouts are used to change the look and feel of
 your page (for example by including a sidebar). Layouts are a great help when you want to change the look and feel of your 
Nuxt.js app. Whether you want to include a sidebar or having distinct layouts for mobile and desktop"
        },
        {
          id: 3,
          name: "The Middleware Directory",
          info:
            "The middleware directory contains your Application Middleware. Middleware lets you define custom functions
 that can be run before rendering either a page or a group of pages (layouts)."
        },
        {
          id: 4,
          name: "The Pages Directory",
          info:
            "The pages directory contains your Application Views and Routes. The framework reads all the .vue files inside
 this directory and creates the application router. Every Page component is a Vue component but Nuxt.js adds special
 attributes and functions to make the development of your universal application as easy as possible"
        },
        {
          id: 5,
          name: "The Plugins Directory",
          info:
            "The plugins directory contains your Javascript plugins that you want to run before instantiating the root Vue.js
 Application. This is the place to register components globally and to inject functions or constants. Nuxt.js 
allows you to define JavaScript plugins to be run before instantiating the root Vue.js Application. This is especially
 helpful when using your own libraries or external modules."
        },
        {
          id: 6,
          name: "The Static Directory",
          info:
            "The static directory is directly mapped to the server root (/static/robots.txt is accessible under
 http://localhost:3000/robots.txt) and contains files that likely won’t be changed (e.g. the favicon). If you don’t want to 
use Webpack assets from the assets directory, you can create and use the static directory (in your project root folder)."
        },
        {
          id: 7,
          name: "The Store Directory",
          info:
            "The store directory contains your Vuex Store files. The Vuex Store comes with Nuxt.js out of the box but
 is disabled by default. Creating an index.js file in this directory enables the store. Using a store to manage the state is
 important for every big application. That’s why Nuxt.js implements Vuex in its core."
        }
      ]
    };
  }
};
</script>
<style>
</style>
                    
                

Dakle, prelazeći iz odeljka script, kreirajte niz sačuvan u promenljivoj directories. Svaki od ovih nizova treba da sadrži objekat sa tri parametra (id, ime, info). Ovo su podaci koje će korisnik videti kada otvori stranicu sa imenima na koja je moguće kliknuti.

Kako to izvesti?

Pomoću v-for petlje niza u template odeljku. Ovo takođe omogućava dobijanje svake stavke u nizu. U petlji, jednostavno koristite nuxt-link za povezivanje i prosleđivanje detalja (id, ime, informacije) u svaki direktorijum kroz Nuxt ruter.

Takođe, stvaranjem datoteke _id.vue, framework bi generisao automatsku dinamičku rutu koja bi uzela parametar id iz date veze i prikazala određene informacije o bilo kom direktorijumu koji bi korisnik želeo da klikne na about stranici:

                    
    <template>
        <section class="directory">
        <h1 class="directory__name">{{ directory.name }}</h1>
        <p class="directory__info">{{ directory.info }}</p>
        </section>
        </template>
        <script>
        export default {
          name: "directory-info",
          data() {
            return {
              directory: this.$route.params.dir
            };
          }
        };
        </script>
        <style>
        </style>
                    
                

U gore navedenom primeru kreirali smo stranicu koja će preuzeti podatke iz parametra rute dir koristeći this.$route.params koji dobija iste informacije i ime direktorijuma na koji se klikće, prikazujući ga korisniku.

Ove postoji jedan problem: kada osvežite stranicu, podaci iz direktorijuma mogu se izgubiti i možete dobiti grešku. Da biste ovo popravili, treba vam Vuex Store.

Korišćenje VuexStore-a

Možete koristiti dva režima za pristup Vuex-u u Nuxt-u:

• Klasični ili zastareli režim
• Modulni mod

Modulni mod

Kada kreirate svoju aplikaciju, Nuxt automatski generiše direktorijum Store za vas, a u režimu Modules Nuxt će svaku pojedinačnu datoteku u ovom folderu tretirati kao modul. Takođe ćete morati da kreirate index.js da biste aktivirali Vuex prodavnicu u aplikaciji:

                    
    export const state = () => ({

    })

    export const getters = {

    }

    export const mutations = {

    }

    export const actions = {

    }
                    
                

Kao što vidite, postavili smo skladište datoteke sa podacima koji bi nam mogli zatrebati. State je ovde radi skladištenja podataka, radi dodatne manipulacije state-om, imamo getters, i konačno, imamo i actions za vršenje izmena.

Sa Nuxt-om takođe možete da razdvojite svaki osnovni koncept i pohranite ga u različite datoteke. To znači da možete zasebno da imate store.js, getters.js, mutation.js i action.js, što čini aplikaciju mnogo lakšom za održavanje. Da biste rešili problem nestanka direktorijuma, potrebno je da koristite prodavnicu, ali prvo morate da instalirate Vuex persist koristeći bilo koju od naredbi u nastavku:

                    
    $ npm install --save vuex-persist
    $ yarn add vuex-persist
                    
                

Kada ga instalirate, kreirajte prateći vuex-persist.js fajl u plugins folderu i dodajte sledeći kod:

                    
    import VuexPersistence from 'vuex-persist'

        export default ({
          store
        }) => {
          window.onNuxtReady(() => {
            new VuexPersistence({
              storage: window.localStorage
            }).plugin(store);
        });
        }
                    
                

Sada uvezite plugin iz node-modules i konfigurišite ga tako da sačuvate prodavnicu u localStorage. Ovaj plugin vam omogućava da izaberete i druge opcije skladištenja, poput sessionStorage, pa ako je potrebno više informacija, možete da koristite zvaničnu dokumentaciju da biste istražili svaku opciju.

Ne zaboravite da ga dodate u datoteku nuxt.config.js:

                    
    /*
       ** Plugins to load before mounting the App
       */
      plugins: [{
        src: '~/plugins/vuex-persist',
        mode: 'client'
      }],
                    
                

Kao što vidite, dodali smo putanju do datoteke dodatku i rekli Nuxt-u da ovaj dodatak pokreće samo na klijentskoj strani aplikacije. Sada možete da podesite skladištenje da biste prihvatili i uskladištili informacije o direktorijumu.

                    
    export const state = () => ({
          directory: ''
        })
        export const getters = {
        }
        export const mutations = {
          saveInfo(state, payload) {
            state.directory = payload.directory
          }
        }
        export const actions = {
        }
                    
                

Dodajte directory zajedno sa funkcijom mutacije (saveInfo) koja menja vrednost directory stanja u skladištu u očekivanju podataka koje ćete proslediti:

                    
    <template>
        <section class="home">
        <h1 class="home__heading">About Nuxtjs Directory Structure</h1>
        <div class="directories">
        <div
                class="directory__container"
                v-for="directory in directories"
                :key="directory.id"
                @click.prevent="storeDirectoryInfo(directory)"
        >
        <p class="directory__name">
        <nuxt-link
                    :to="{ name: 'id', params: { id: directory.id, dir: directory } }"
        >{{ directory.name }}</nuxt-link>
        </p>
        </div>
        </div>
        </section>
    </template>
    <script>
        export default {
          name: "about-nuxt",
          data() {
            return {
              directories: [
                //remains the same
              ]
            };
          },
          methods: {
            storeDirectoryInfo(dir) {
              this.$store.commit("saveInfo", {
                directory: dir
              });
            }
          }
        };
    </script>
    <style>
    </style>

                    
                

Sada, dodajte click event u svaki direktorijum koji prepušta informacija kao argument u storeDirectoryInfo. Ovom funkcijom posvećujete object direktorija vašem store-u.

Na kraju, vratite se u svoj _id.vue fajl i prosto zamenite varijablu direktorijuma sa podacima iz store-a:

                    
    <template>
        <section class="directory" v-if="directory">
        <h1 class="directory__name">{{ directory.name }}</h1>
        <p class="directory__info">{{ directory.info }}</p>
        </section>
    </template>
    <script>
        import { mapState } from "vuex";
        export default {
          name: "directory-info",
          computed: {
            ...mapState(["directory"])
          }
        };
    </script>
    <style>
    </style>
                    
                

Sada refaktorišite kod da biste koristili direktorijum objekata direktorija iz prodavnice tako što ćete ga uvoziti.

Ovde refaktoriziramo naš kod tako da prvo koristimo objekt direktorijuma direktno iz naše prodavnice tako što uvozimo mapState iz Vuex-a:

                    
    import { mapState } from 'vuex';
                    
                

Umesto toga, ako proverite da li je this.$route.params.dir prvo nedefinisan pre pristupanja sačuvanim podacima, jednostavno čitajte podatke koji se u njoj nalaze.

                    
    <script>
        import { mapState } from "vuex";
        export default {
          name: "directory-info",
          computed: {
            ...mapState(["directory"])
          }
        };
    </script>
                    
                

Na kraju, ažurirate svoj obrazac kako biste bili sigurni da se neće prikazivati dok je direktorijum nedefinisan:

                    
    <template>
        <section class="directory" v-if="directory">
            <h1 class="directory__name">{{ directory.name }}</h1>
            <p class="directory__info">{{ directory.info }}</p>
        </section>
    </template>
                    
                

Sada, bez obzira na to koliko puta osvežite aplikaciju, objekt direktorijuma se neće izgubiti i lako mu možete pristupiti metodom mapState(['stateVariable'])

Korišćenje Herokua za primenu

Sada je vreme da svoju novu aplikaciju primenite. U ovom primeru ćemo primeniti aplikaciju na Heroku pomoću GitHub-a. Ako još niste podesili repozitorij za aplikaciju, sada bi bila dobra ideja. Kada završite s tim, samo otvorite Heroku, napravite novu aplikaciju, unesite ime i povežite ga sa GitHub-om.

Sada sve što treba da uradite jeste da dodate sledeće konfiguracione promenjive:

                    
    NPM_CONFIG_PRODUCTION=false
    HOST=0.0.0.0
    NODE_ENV=production
                    
                

Nakon toga, kreirajte Procfile u osnovnom direktorijumu aplikacije i unesite sledeću komandu:

                    
    web: nuxt start
                    
                

Ovo će pokrenuti naredbu nuxt start i takođe će narediti Heroku-u da usmeri sav spoljni HTTP saobraćaj ka njoj.

Razlozi za upotrebu Nuxt.js

Često se kaže da Vue.js developeri mogu sjajno da koriste Nuxt.js, međutim, stručnjaci za Vue se takođe mogu zapitati zašto bi im trebao drugi framework za upotrebu jednog framework-a. U ovom odeljku ćemo razgovarati o svim prednostima koje donosi Nuxt.

Kao framework „višeg nivoa“, Nuxt pojednostavljuje razvoj Vue aplikacija za jednu ili univerzalnu stranicu tako što apstraktuje detalje servera i klijentskog koda omogućavajući programerima da se usredsrede na razvoj. To je fleksibilna projektna baza koja sadrži puno funkcija u malom paketu.

• Jednostavnost upotrebe – verovatno jedna od najvažnijih tačaka Nuxt.js-a jesta ta što ubrzava process izgradnje univerzalne aplikacije. Kao što možda znate, Vue.js i mnogi drugi moderni JS framework-ovi usredsređeni su na razvoj SPA-a, jer se oni mogu koristiti za kreiranje brzih korisničkih interfejsa, ali ponekad im može biti potrebno dosta vremena da se učitaju, a u nekim slučajevima mogu prouzrokovati glavobolje vezane za SEO, s obzirom na to da se Google često bori da ih ispravno popiše, jer na stranici nema početnog sadržaja, jer se on generiše kasnije. Univerzalna stranica već unapred učitava aplikaciju na veb serveru i šalje već prikazani HTML svaki put kada se podnosi zahtev brauzera, ubrzavajući vreme učitavanja i poboljšavajući SEO. Dakle, Nuxt se efikasno rešava ovog problema čineći deljenje koda između servera i klijenta krajnje jednostavnim.
• Statičko prikazivanje Vue aplikacija – takođe velika inovacija koja kreira potpuno statičnu verziju stranice generišući HTML za svaku rutu stavljajući je u namensku datoteku. Na primer, ako imate dve različite stranice (rute), Nuxt.js će automatski generisati dva različita HTML foldera. To omogućava da iskoristite slične beneficije kao što bi to učinili sa univerzalnim aplikacijama, s razlikom što server više nije potreban jer se sve generiše u fazi razvoja.
• Automatsko razdvajanje koda – generišite statične verzije stranice sa Nuxt-om pomoću posebne konfiguracije Webpack-a. Svaka statički generisana ruta može u velikoj meri pomoći u poboljšanju brzine i održavanju veličine JS datoteka malim.
• Postavljanje sa početnim template-om preko komandne linije – imate početni obrazac koji pruža sve potrebno za početak bilo kog projekta koji ima jasnu strukturu direktorijuma.
• Sjajna struktura projekta – Nuxt.js podrazumevano daje urednu strukturu aplikacija koja daje solidnu osnovu za organizovanje aplikacije na razumljiv način, kako se stvari ne bi prenatrpale i zapetljale kao što se ponekad može dogoditi sa Vue aplikacijom. Dobijate direktorijume o kojima smo već razgovarali (rasporede, stranice, komponente itd.) koji vam omogućavaju da uredno organizujete strukturu aplikacije.
• Lake tranzicije ruta – Nuxt.js kreira rute na način koji takođe dodaje element <transition> na svaku stranicu čineći stvaranje tranzicija između njih jednostavnim.
• Komponente jedne datoteke – ako ste koristili komponente u Vue projektima, znate da u malim aplikacijama mogu da rade sasvim dobro, međutim, način na koji su definisani može da izazove poteškoće, posebno u slučaju većih projekata. Ovim problemom možete se pozabaviti korišćenjem komponenata jedne datoteke zajedno sa nastavkom .vue, ali prvo morate da koristite Babel i Webpack da biste podesili proces izrade. Sa Nuxt-om ovo postaje mnogo lakše jer je unapred konfigurisano sa značenjem Webpack, možete da koristite unapred kreirane .vue datoteke.
• Brzo kompajliranje ES6/ES7 – osim što dolazi sa Webpack-om, Nuxt.js ima i unapred zapakovan Babel za kompajliranje najnovijih JS verzija u formate koji osiguravaju da će se pokretati i na starijim brauzerima.
• Server za automatsko ažuriranje za lakši razvoj – više ne morate koristiti postupak promena-osvežavanja-promene-osvežavanja, jer vam Nuxt podešava program za automatsko ažuriranje. Nuxt.js koristi Webpack konfiguraciju proveravajući promene i sve kompajlirajući. Samo pokrenite npm run dev komandu unutar projekta i postaviće razvojni server.
• Zajednica – kolekcija Nuxt Community GitHub sjajan je resurs za module, početne pakete, biblioteke i još mnogo toga kako biste bili sigurni da ne počinjete od nule.

Zaključak debate Nuxt-a u Vue Vs Nuxt

Ako pažljivije pogledate ovaj članak, možete videti da Nuxt.js framework nudi pregršt pogodnosti za front-end razvoj, ali za neke od development timova poboljšanje SEO-a je karakteristika koja ide u korist Nuxt-a.

Međutim, kada želite da uporedite dva framework-a, neophodno je reći da se oni sasvim različito bave logikom developmenta. Vue se uvek izvodi na strani klijenta, dok Nuxt ne. A ova činjenica može poslužiti kao izvor nekoliko problema u pojedinim slučajevima. Na primer, ako želite da izaberete element DOM nakon što se aplikacija učita, postoji šansa da se aplikacija pokreće na strani Node.js i tamo nema DOM elemenata. Isti ćete problem imati i prilikom pristupa lokalnoj memoriji brauzera. Sa Vue-om to nisu problemi jer se izvode na strani klijenta.

Nuxt.js je takođe uspeo da bude tema kritika stručnjaka u prošlosti, koji navode da on nije u potpunosti spreman za enterprajz nivo aplikacija, jer je imao lošu podršku za typescript i ne tako idealno rukovanje greškama na serveru.

Uzimajući sve ovo u obzir, developeri koji tek ulaze u Nuxt.js će verovatno biti pomalo zbunjeni tokom razvoja svog prvog Nuxt projekta, naročito ako su prešli sa Vue.js-a. Međutim, savladavanje bilo kog novog framework-a ima svoju krivulju učenja i kada nju prebrodite, zaista možete razumeti moć i mogućnosti Nuxt.js framework-a.

Dakle, Nuxt.js ili Vue.js?

Stručnjaci koji su dobro upućeni u oba okvira obično ističu da je za odgovor na ovo pitanje potrebno razumeti prednosti i slabosti svakog od njih. Na taj način, oni mogu da odluče da koriste jedno ili drugo na osnovu određenog projekta koji im je u toku.

Nuxt generalno nudi bolji SEO, brži razvoj i javno upravljanje i funkcije deljenja sa izvanrednim opcijama konfiguracije, automatskom podelom koda sa unapred prikazanim stranicama i sjajnim metodama metatagova. Većinu ovih karakteristika je nemoguće (ili izuzetno zahtevno) postići pomoću Vue-a. Za projekte koji zahtevaju takve funkcije, Nuxt.js je pravo rešenje.

Međutim, ako se zateknete da radite na internom proizvodu, sa proširenim pokrivanjem koda i upravljanjem, bez potrebe za SEO performansama, ili vam je potreban tradicionalni SPA sa ručnom logikom koda, Vue.js bi trebalo da bude vaš prvi izbor.