Nuxt.js è il framework Vue più intuitivo ad oggi disponibile sul mercato. Combina la potenza di Vue.js con funzioni di rendering lato server che lo rendono più potente e permettono di costruire un’applicazione completa di Vue.js con rendering lato client, un’applicazione statica completa e un’applicazione monolite.

Nuxt.js risolve il problema della strutturazione dei progetti Vue.js, in quanto è dotato di un’architettura di sviluppo frontend di livello enterprise. Le funzionalità di Nuxt.js sono già strutturate secondo gli standard del settore per creare applicazioni aziendali.

Questa guida esplorerà Nuxt.js, cosa ci si può costruire e come funziona dall’interno.


Cos’è Nuxt.js?

Nuxt.js è un framework di rendering lato server costruito su Vue.js. Astrae la maggior parte delle complesse configurazioni legate alla gestione dei dati asincroni, del middleware e del routing. Inoltre, aiuta a strutturare le applicazioni Vue.js utilizzando un’architettura standard per la creazione di applicazioni Vue.js semplici o aziendali.

Logo ufficiale di Nuxt.js.
Logo ufficiale di Nuxt.js. (Fonte: Medium)

A Cosa Serve Nuxt.js?

Nuxt.js permette di creare diversi tipi di applicazioni. Di seguito sono riportate le tre applicazioni più popolari realizzate con Nuxt.js.

Pagine Statiche Generate

Questo tipo di sito web non richiede alcuna fonte di contenuti esterni: i contenuti sono già incorporati nell’HTML. Esempi di siti web di questo tipo sono i siti di portfolio, demo e tutorial.

Applicazioni a Pagina Singola (SPA)

Questo approccio di sviluppo frontend recupera contenuti dinamici da un’API esterna e li visualizza sul lato client. La maggior parte dei framework JavaScript come React.js, Vue.js, Angular ed Ember.js sono tutti framework per applicazioni a pagina singola.

Inoltre, il sistema di routing di una SPA è realizzato con l’API HTML 5 History o con l’hash di posizione per il routing, che offre agli sviluppatori la possibilità di modificare l’URL di un sito web senza dover aggiornare l’intera pagina.

Applicazioni Universali

“Applicazione universale” è un termine che descrive l’uso di un approccio di rendering lato server per recuperare i dati lato client sul server prima di eseguire il rendering completo della pagina sul browser client.

Il rendering lato server (SSR) è un problema noto in Vue.js perché richiede configurazioni noiose.

Nuxt.js risolve il problema dell’SSR in Vue.js, il che è utile per l’ottimizzazione dei motori di ricerca (SEO). Nuxt.js può anche estendere le applicazioni Universal per ospitare un’applicazione monolite a tutti gli effetti, in cui il frontend e il backend condividono un’unica base di codice.

Come Funziona Nuxt.js?

Nuxt.js funziona come un framework lato server quando un utente visita un sito web. Se il rendering lato server è abilitato, le richieste vengono eseguite sul server ogni volta che l’utente richiede una pagina, quindi è necessario un server per poter servire la pagina a ogni richiesta. Inoltre, se il rendering lato client è abilitato, il contenuto della pagina viene visualizzato nel browser utilizzando JavaScript.

Queste sono le azioni e i metodi principali utilizzati in Nuxt.js:

  • nuxtServerInit (Azione): È il primo hook del ciclo di vita che viene richiamato sul lato server se lo store Vuex è abilitato. È un’azione Vuex che viene richiamata solo sul lato server per pre-popolare lo store e infine può essere utilizzata per inviare altre azioni nello store Vuex.
  • validate() (Funzione): Il metodo validate viene richiamato prima del rendering dei componenti della pagina. È utile per convalidare i parametri dinamici di un componente di pagina.
  • Il metodo asyncData() viene utilizzato per recuperare i dati e renderli sul lato server, mentre il metodo fetch() viene utilizzato per riempire l’archivio prima del rendering della pagina.

Ad esempio, quando un sito Nuxt.js riceve una prima visita alla pagina, richiama l’azione nuxtServerInit per aggiornare gli stati Vuex (se definiti nello store Vuex). Altrimenti, se nuxtServerInit non è definito, passa a un’altra fase.

Quindi, cerca i middleware in questo ordine. Per prima cosa, controlla il file nuxt.config.js per verificare la presenza di un middleware globale. Se è definito, viene eseguito prima di verificare la presenza di middleware nelle pagine di layout. Infine, esegue il middleware delle singole pagine, compresi i figli della pagina.

Dopo aver eseguito tutti i middleware in ordine, controlla se il percorso è dinamico ed esegue il metodo validate() creato e convalidato.

Successivamente, richiama il metodo asyncData() della pagina per recuperare e rendere i dati sul lato server prima di richiamare il metodo fetch() per popolare lo store Vuex sul lato client.

A questo punto, la pagina dovrebbe avere tutti i dati e i contenuti necessari per visualizzare una pagina web vera e propria. Quindi la pagina viene renderizzata dal motore Nuxt.js e mostrata al visitatore, completando il processo.

Questo diagramma di flusso illustra tutti i passaggi necessari per il rendering di una singola pagina:

Una panoramica degli hook del ciclo di vita di Nuxt.js.
Una panoramica degli hook del ciclo di vita di Nuxt.js. (Fonte: Sito web Nuxt)

Indipendentemente dallo strumento che si utilizza, ci si sente sempre più sicuri quando si ha un’idea di come funziona il “motore” sotto il cofano, e grazie alla spiegazione qui sopra, sarà più semplice capire il funzionamento di Nuxt.js. Scopriamo adesso i vantaggi dell’uso di Nuxt.js per il vostro prossimo progetto.

Vantaggi di Nuxt.js

Parliamo ora dei vantaggi del framework Nuxt.js e del perché sia diventato così popolare negli ultimi tempi.

Creare Applicazioni Universali senza Problemi

Nuxt.js rende molto semplice la creazione di applicazioni di rendering lato server. Se avete mai provato a sviluppare un’applicazione con rendering lato server con Vue.js, è probabile che abbiate affrontato ostacoli difficili da superare a causa della miriade di opzioni di configurazione disponibili sia per il lato server che per il lato client.

La funzione SSR è già integrata in Nuxt.js ed è facile da usare. Permette di accedere alle proprietà isServer e isClient dei vostri componenti per decidere se renderizzare qualcosa sul lato client o sul lato server.

Fornisce inoltre il metodo asyncData dedicato al recupero e al rendering dei dati sul lato server del componente della pagina.

Rendering Statico delle Applicazioni Vue con Universal Benefit

I siti web generati staticamente sono in aumento nel settore del web e con un singolo comando di nuxt generate è possibile generare una versione statica del proprio sito web, con tutto l’HTML e i percorsi corrispondenti.

Il comando nuxt generate funziona esattamente come l’approccio dell’applicazione universale con tutte le funzionalità SSR abilitate, ma per un sito web generato staticamente.

In Nuxt.js, creare un sito web generato staticamente è come costruire una potente applicazione universale senza un server per alimentare la funzione SSR.

Dividere il Codice in Modo A utomatico

Uno dei motivi per cui Nuxt.js è molto veloce in termini di prestazioni è la funzione di suddivisione del codice, che prevede che a un percorso venga assegnato un singolo file JavaScript contenente solo il codice necessario per l’esecuzione di quel percorso, riducendo così le dimensioni dell’applicazione.

Questa funzione di suddivisione del codice utilizza la configurazione di Webpack che è già presente quando si genera una versione statica del sito web.

Hot Reload

L’hot reload è un’ottima funzione aggiunta per risolvere il metodo di aggiornamento delle modifiche, che richiede molto tempo, nello sviluppo di un software.

È configurato per aggiornare automaticamente il server di sviluppo quando si modifica un qualsiasi file nella directory principale.

Durante lo sviluppo e il lavoro sui file di .vue, utilizza una configurazione di Webpack per verificare le modifiche e compila tutto per voi. Questo approccio fa risparmiare tempo agli sviluppatori e favorisce uno sviluppo più rapido delle applicazioni.

Compilazione ES6/ES7

Nuxt.js viene fornito con Webpack e Babel per tradurre e compilare le ultime versioni di JavaScript come ES6 e ES7 in JavaScript in grado di funzionare sui browser più vecchi.

Babel è configurato per compilare tutti i file .vue e il codice ES6 all’interno dei tag di script in JavaScript che funziona su tutti i browser.

Questa funzione risolve il problema di creare manualmente applicazioni compatibili con i browser e di impostare la configurazione da zero.

Come Creare un’Applicazione Nuxt.js

In questa sezione vedremo come creare un’applicazione Nuxt.js. Prima di tuffarci, analizziamo alcuni concetti fondamentali per lo sviluppo di un’applicazione Nuxt.js.

Creare un’Applicazione Nuxt.js

Creare un nuovo progetto è facile e immediato. È possibile creare un progetto con diversi approcci, come indicato nella documentazione ufficiale, ma l’approccio preferito e consigliato è l’utilizzo della CLI.

Per creare una nuova applicazione utilizzando la CLI, assicuratevi di avere installato npx (npx viene fornito di default quando si installa yarn o npm 5.2.0).

Quindi, digitate il seguente comando nella cartella in cui volete inserire il tuo progetto:

npx create-nuxt-app 
cd 
npm run dev

Assicuratevi di sostituire il nome del progetto> con il nome effettivo del progetto.

Capire la Struttura delle Cartelle di Nuxt.js

Quando si crea una nuova applicazione utilizzando uno dei diversi approcci di installazione indicati nella documentazione ufficiale, vengono presentati diversi file e cartelle generati dalla CLI. Questi file e cartelle sono fondamentali e richiedono che alcune cartelle rimangano invariate senza ulteriori configurazioni.

Qui di seguito vedremo la struttura delle cartelle, parleremo di ogni file e cartella e vedremo di capirne l’importanza.

Struttura della cartella Nuxt.js appena creata.
Struttura della cartella Nuxt.js appena creata.

1. .nuxt

La cartella .nuxt è nascosta e generata all’avvio del server di sviluppo e si chiama build directory. La cartella contiene i file o gli artefatti generati quando si esegue il comando npm run build.

È possibile modificare i file in questa cartella solo a scopo di debug, perché i file verranno generati di nuovo automaticamente una volta eseguito il comando dev o build.

2. Assets

La cartella assets contiene tutte le risorse non compilate come immagini, font, file SASS e Stylus. Webpack compilerà qualsiasi file incluso in questa cartella durante il processo di rendering.

3. Components

La directory components è simile alla directory components di Vue.js, dove sono memorizzati tutti i componenti di Vue. I componenti sono i file che costituiscono le diverse parti delle pagine e possono essere riutilizzati e importati nelle vostre pagine, nei layout e in altri componenti.

4. Layout

La cartella layouts contiene il layout dell’applicazione ed è molto utile per separare le diverse strutture dell’applicazione per gli utenti autenticati o per gli utenti guest.

Si possono creare molti layout che corrispondono alla struttura della vostra applicazione. Per esempio, si potrebbe desiderare che alcune pagine del sito web abbiano diverse barre laterali, intestazioni, piè di pagina, ecc. Questi e altri elementi vengono strutturati utilizzando i file di layout memorizzati nella cartella layouts.

5. Middleware

I middleware sono funzioni personalizzate che possono essere eseguite prima del rendering di una pagina o di un gruppo di pagine (layout) e possono essere definite e memorizzate nella cartella middlewares di Nuxt.js.

I middleware sono molto utili quando si crea un sito web per soli utenti e se si vuole limitare l’accesso a determinate pagine, è possibile impostare un middleware per verificare se un utente è loggato o meno.

In Nuxt.js, i middleware funzionano in modo simile ai middleware di qualsiasi framework di programmazione backend come ExpressJS, Laravel, ecc. Esistono tre diversi tipi di middleware: middleware nominati, anonimi e router.

6. Pages

La directory pages è la base del sistema di routing di Nuxt.js in quanto legge tutti i file .vue all’interno di questa directory e crea automaticamente la configurazione del router.

La cartella pages contiene le viste e le rotte dell’applicazione e ogni componente della pagina è anche un componente standard di Vue.

Tuttavia, Nuxt.js lo tratta come un percorso aggiungendo attributi e funzioni speciali per rendere lo sviluppo dell’applicazione universale il più semplice possibile.

7. Plugins

La cartella plugins contiene i codici JavaScript che si vogliono eseguire prima di istanziare l’applicazione Vue.js principale. Questo è il luogo in cui aggiungere i plugin di Vue e iniettare funzioni o costanti.

In Nuxt.js, invece di utilizzare la funzione Vue.use(), è necessario semplicemente creare un nuovo file nella cartella plugins e iniettare il plugin Vue nell’istanza Vue utilizzando il file nuxt.config.js.

8. Static

La cartella static contiene tutti i file statici del tuo progetto che probabilmente non cambieranno o che dovranno essere resi senza alcuna compilazione.

Tutti i file inclusi nella cartella static saranno automaticamente serviti da Nuxt.js e accessibili attraverso l’URL principale del progetto.

Questa directory è ottima per file come favicon, robots.txt, ecc.

9. Store

La directory store contiene tutti i file dell store Vuex ed è suddivisa in moduli come da impostazione predefinita.

Lo store Vuex viene fornito di serie ma è disattivato come impostazione predefinita. Sarà necessario attivare lo store creando un file index.js all’interno della cartella store.

Lo store Vuex è necessario per la creazione e la gestione di un progetto aziendale. Ecco perché Nuxt.js viene fornito con lo store Vuex ed è configurato per lo sviluppo di applicazioni di livello enterprise.

Pagine e Sistema di Routing di Nuxt.js

Nuxt.js rende il sistema di routing semplice come la creazione di directory e file nella directory pages. Genera automaticamente un file router in base alla struttura dei file e delle cartelle della directory.

Ad esempio, se si ha un file about.vue nella directory pages, il sistema convertirà automaticamente il percorso e si potrà visitare il percorso nel proprio browser per vedere il contenuto della pagina “Informazioni”.

Questo sistema di routing permette anche di definire tre diversi percorsi creando solo file e cartelle. Analizziamo questi tipi di percorso in modo più dettagliato.

1. Routing di Base

I routing di base sono quelli che non richiedono alcuna configurazione aggiuntiva per funzionare. È il tipo di percorso più semplice e può essere semplice come /about, /contact, ecc.

Per creare un sistema di routing di base, è possibile strutturare la propria directory di pagine come segue:

pages/
--| services.vue
--| contact.vue
--| index.vue

Nuxt.js genererà automaticamente un file router utilizzando i file aggiunti nella cartella pages:

router: {
  routes: [
    {
      name: 'index',
      path: '/',
      component: 'pages/index.vue'
    },
    {
      name: ‘services’,
      path: '/services’,
      component: 'pages/services’
    },
    {
      name: 'contact',
      path: '/contact',
      component: 'pages/contact'
    },
  ]
}

Ora tutti i nostri file sono strutturati in modo ordinato e instradati automaticamente.

2. Routing Annidati

I routing annidati sono percorsi creati all’interno di un routing principale. I percorsi annidati sono utilizzati per creare più livelli di instradamento profondo.

Per creare routing annidati, create una cartella principale e posizionate tutti i file di percorso all’interno di quella cartella.

Proviamo a creare un percorso annidato:

pages/
 --| dashboard/
 -----| user.vue
 -----| settings.vue
 --| dashboard.vue
 --| services.vue
 --| contact.vue
 --| index.vue

Nella struttura di cartelle precedente, abbiamo creato un nuovo file e una nuova cartella con lo stesso nome di dashboard e poi abbiamo aggiunto i file user.vue e settings.vue come sottocartelle della cartella dashboard.

Questa semplice struttura di cartelle genererà un router con percorsi simili a quello qui sotto:

router: {
  routes: [
    {
      name: 'index',
      path: '/',
      component: 'pages/index.vue'
    },
    {
      name: 'services',
      path: '/services',
      component: 'pages/services'
    },
    {
      name: 'contact',
      path: '/contact',
      component: 'pages/contact'
    },
    {
      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'
        }
      ]
    }
  ]
}

I percorsi annidati sono un po’ macchinosi da creare in Vue.js, soprattutto quando è necessario crearne molti, come si evince nell’esempio di codice qui sopra, ma Nuxt.js ha reso il tutto più semplice creando solo file Vue in una cartella annidata.

3. Routing Dinamico

I routing dinamici vengono creati con percorsi sconosciuti perché dipendono da una chiamata API o perché si vuole evitare di creare la pagina più volte. Si tratta di percorsi definiti a partire da una variabile che può essere un nome, un numero o un ID recuperato dai dati del client nell’applicazione.

Questo è utile, ad esempio, quando si costruisce un’applicazione di notizie, dove non si conosce l’ID o lo slug del post che l’utente dovrà cliccare per leggere. Ma con il routing dinamico, è possibile recuperare l’ID/slug del post e rendere il post corretto con l’ID/slug.

Per creare un percorso dinamico, si dovrà aggiungere un trattino basso al nome del file o della cartella .vue. È possibile dare al file o alla cartella un nome a piacere, ma per renderlo dinamico è necessario aggiungere un trattino basso.

Ad esempio, se si definisce un file _slug.vue nella directory pages, si può accedere al valore utilizzando l’oggetto params.slug. Vi mostreremo con un esempio come creare un percorso dinamico:

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

L’aggiunta del trattino basso a _id e _routeName creerà un percorso dinamico per la pagina con il parametro ID, oltre a un percorso genitore con un parametro stringa e i percorsi “figlio” mostrati qui sopra. Questa struttura di pagina genererà un router con i seguenti percorsi all’interno del file:

   {
      name: 'work',
      path: '/work',
      component: 'pages/work'
    },
    {
      name: 'contact',
      path: '/contact',
      component: 'pages/contact'
    },
    {
      name: 'id',
      path: '/:id',
      component: 'pages/_id.vue'
    }
    {
      name: 'user',
      path: '/user',
      component: 'pages/user/index.vue'
    },
    {
      name: 'user-about',
      path: '/user/about',
      component: 'pages/user/about.vue'
    },
    {
      name: 'user-routeName',
      path: '/user/:routeName',
      component: 'pages/user/_routeName/index.vue'
    },
    {
      name: 'user-routeName-info',
      path: '/user/:routeName/info',
      component: 'pages/user/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'
        }
      ]
    }
  ]
}

Ora che abbiamo esplorato i diversi sistemi di routing integrati nel framework Nuxt.js, impariamo a creare e gestire i Vuex store.

Usare i Vuex Store in Nuxt.js

Nuxt.js risolve un importante problema di struttura di Vue semplificando la gestione di Vuex durante la creazione di un progetto aziendale. La cartella store viene creata automaticamente quando si crea una nuova applicazione.

È possibile attivare lo store Vuex creando un file index.js all’interno della cartella store. Grazie a questo semplice miglioramento, lo store di Vuex è ora strutturato e modulato secondo le migliori pratiche descritte nella documentazione ufficiale di Vuex, il che incoraggia lo sviluppo di applicazioni su larga scala.

Il vostro file index.js dovrebbe contenere la seguente struttura per corrispondere a come Nuxt.js struttura il vostro store Vuex. Diamo un’occhiata:

export const state = () => ({
  
})
export const getters = {

}
export const mutations = {
  
}
export const actions = {
  
}

Nuxt.js vi permette di utilizzare l’approccio split-by-feature nelle vostre applicazioni su larga scala. Con questo approccio, è possibile creare diversi file dello store Vuex in base alle funzionalità delle proprie applicazioni. Ad esempio, se la vostra applicazione ha funzioni di utenti, post e commenti, potete creare file diversi come users.js, posts.js e comments.js nella vostra directory store.

Questo metodo semplifica l’accesso a un determinato file di archivio in base alle funzionalità dell’applicazione, trasformando il noioso processo di individuazione e aggiornamento dei dati in una passeggiata senza sforzo.

Riepilogo

Nuxt.js è un framework Vue molto popolare per frontend SSR e generati staticamente. Non risolve solo il problema della configurazione e dell’impostazione dell’SSR nelle applicazioni Vue, ma favorisce anche lo sviluppo di applicazioni aziendali aderendo alle migliori pratiche di strutturazione e architettura delle applicazioni Vue su larga scala.

Questa guida ha esplorato tutto ciò che dovete sapere su Nuxt.js, compreso quello che potete costruirci. Abbiamo parlato di pagine statiche, applicazioni a pagina singola (SPA) e applicazioni universali, e di come svilupparle con Nuxt.js.

Avete visto con i vostri occhi quanto è facile e vantaggioso scegliere Nuxt.js per il vostro prossimo grande progetto aziendale. Fateci sapere nella sezione commenti cosa costruirete con questi nuovi superpoteri!