Nuxt - cos’è 

In questo articolo tratteremo di alcune nuove caratteristiche introdotte nella versione 3 di Nuxt, ma per prima cosa partiamo con una breve panoramica. Nuxt.js è un framework JavaScript open source basato su Vue.j che ci aiuta nello sviluppo di applicativi Web e permette di creare applicazioni e siti Web full-stack, in modo intuitivo ed estendibile.

Vue - cos’è

Ma cos’è Vue? Scopriamo!

Vue.js è un framework JavaScript open source, usato principalmente per:

• lo sviluppo front-end;
• la creazione di interfacce utente (UI);
• la creazione di applicazioni a pagina singola (SPA) sul Web. 

Le funzionalità di Vue ci facilitano lo sviluppo consentendoci di:

• estendere l'HTML;
• creare modelli e componenti riutilizzabili;
• progettare interfacce utente reattive, grazie ad un'API semplice e flessibile.

Framework: una breve spiegazione

Finora abbiamo trattato Nuxt.js e Vue.js dando per scontato il concetto di framework, ma è forse necessario fare un passo indietro. Di cosa parliamo esattamente?

Un framework, che possiamo tradurre in italiano con il termine struttura è un'implementazione logica di un particolare schema architetturale (design pattern), sulla quale un software può essere progettato e realizzato.

In sostanza, lo scopo principale di quest’ultimo è quello di fornire strumenti per facilitare e velocizzare il lavoro di programmazione di chi lo adotta.

Nuxt e Vue: Se stanno insieme, ci sarà un perché

Nuxt unisce alle funzionalità di Vue.js le funzionalità di rendering lato server. Quest’ultimo può migliorare nettamente la SEO dell’applicazione e rendere più reattive le interfacce utente.

Diciamo che Nuxt.js è un potenziatore per Vue, ma non va inteso come un suo sostituto: infatti non può funzionare in versione stand-alone, perché non è un framework backend completo.

Nello specifico, si può dire che Nuxt sia composto da una raccolta di librerie e componenti ufficiali di Vue (come Vue Router, Vuex, Vue Server Renderer e Vue Meta), che forniscono funzionalità per semplificare lo sviluppo tra i due lati client e server.

Nuxt - cosa possiamo creare

Possiamo usare Nuxt per andare a creare diversi tipi di applicazioni: 

• applicazioni web renderizzate lato client SPA ( Single-Page Applications ); 
• applicazioni web renderizzate lato server SSR ( Server Side Rendering ); 
• applicazioni generate statiche SSG ( Static Site Generation );
• applicazioni universali SSR + Hydration ( Universal Rendering ), con codice JavaScript eseguito sia lato client che lato server.

Nuxt, nell’operatività quotidiana, ci dà un fondamentale aiuto sia nello sviluppare che nello strutturare le applicazioni Vue.js.

Nel primo caso, un aiuto sostanziale allo sviluppo deriva dal fatto che Nuxt astrae gran parte della complessa configurazione coinvolta nella gestione di dati asincroni, middleware e routing.
Senza contare poi l’importanza di strutturare un’applicazione al meglio: non si può ignorare come Nuxt ci fornisca un'architettura standard ed efficiente per effettuare la creazione di applicazioni Vue.

Nuxt 3 - le novità introdotte nell’ultima versione

Tra le novità introdotte tre principali aggiornamenti rendono il framework più performante, più veloce e più facile da mantenere: 

• migliore manutenzione grazie alla riscrittura del codice in TypeScript e suo supporto;
• miglioramento delle prestazioni grazie al supporto delle funzionalità di Vue 3;
• una maggiore velocità con l’introduzione del nuovo motore server Nitro.

Altre aggiunte hanno invece migliorato l'esperienza di sviluppo: 

• Nuxi (Nuxt CLI), per creare nuovi progetti direttamente dal terminale;
• Nuxt Kit semplifica lo sviluppo dei moduli Nuxt; 
• Nuxt DevTools strumento per eseguire il debug di un’applicazione; 
• Nuxt Bridge “ponte” che semplifica il passaggio di un’applicazione da Nuxt 2 a Nuxt 3.

Nuxt 3 - supporto TypeScript

Nuxt 3 è stato riscritto con Typescript per garantire una manutenzione più semplice, di cui è anche previsto un supporto TypeScript integrato. Nuxt ci consente infatti di utilizzare TypeScript senza alcuna configurazione, andando a creare automaticamente una configurazione TS (.nuxt/tsconfig.json) e un file di tipo generico (.nuxt/nuxt.d.ts), utili a questo scopo.

TypeScript è un linguaggio tipizzato, cioè aggiunge definizioni di tipo statico.

La tipizzazione ci consente di descrivere la forma di un oggetto, documentarlo meglio; inoltre conse a TypeScript di verificare che il codice funzioni correttamente.

L’adozione di TypeScript nello sviluppo di un’applicazione la rende anche più robusta poiché man mano che le applicazioni crescono, un sistema di tipo statico può aiutare a prevenire molti potenziali errori di runtime.

L’utilizzo di TypeScript nello scrivere le applicazioni Nuxt è quindi preferibile sebbene non sia obbligatorio, l'uso del JavaScript è infatti consentito e funzionante.

Nuxt 3 - supporto Vue 3

Con Nuxt 3 scritto in Vue 3, abbiamo accesso alle nuove funzionalità Vue come:

• composition API;
• migliori importazioni di moduli; 
• prestazioni complessive dell'app migliorate.

Nuxt 3 viene fornito anche con il supporto Vite, retrocompatibile con Nuxt 2. Vite è un builder, uno strumento di compilazione che fornisce un'esperienza di sviluppo più snella e più rapida per i progetti web.

Nuxt 3 - Nitro

Nuxt Nitro è Il nuovo motore server Nuxt 3: un server leggero e indipendente dalla piattaforma che non ha dipendenze di runtime Nuxt. Sblocca nuove funzionalità full-stack, consentendo la creazione di percorsi API, come solitamente viene fatta nella parte pagine ( /pages ), direttamente nella tua app. 

Nitro supporta anche l'aggiunta di middleware agli endpoint API. 

Nuxt legge tutti i file nella directory /server/middleware per creare il middleware per il progetto e questi file vengono eseguiti a ogni richiesta. 

Nuxt 3 - Nuxi

Nuxi è l'interfaccia a riga di comando di Nuxt molto utile per lo sviluppo e ci permette di costruire nuovi progetti con un minore sforzo. La CLI viene fornita con una nuova interfaccia di moduli integrata e ci aiuta a eseguire i comandi in modo più rapido ed efficiente. Nuxi è stata introdotta con Nuxt 3 ma è retrocompatibile, quindi utilizzabile anche con le versioni precedenti, per esempio se siamo su Nuxt 2.

Nuxt 3 - Nuxt Kit

Nuxt Kit fornisce una nuova esperienza di sviluppo di moduli Nuxt flessibili, con compatibilità tra versioni diverse.

Nuxt Kit è essenzialmente un Nuxt SDK che espone le funzionalità chiave di Nuxt agli utenti e ai creatori di moduli, in modo che, i moduli stessi continueranno a funzionare indipendentemente da come il core di Nuxt cambierà in futuro. 

Ciò significa che l’utilizzo Nuxt Kit consente lo sviluppo di moduli che funzioneranno sia su Nuxt 2 che su Nuxt 3 e non dovremo preoccuparci (almeno in teoria) di future incompatibilità o breaking-change, le quali potrebbero richiedere la riprogettazione del codice del modulo, anche se il core di Nuxt cambiasse in futuro.

Nuxt 3 - Nuxt DevTools

Nuxt DevTools è uno strumento visivo che ci aiuta a comprendere la nostra app Nuxt e migliora ulteriormente l'esperienza di sviluppo.

Ora possiamo monitorare ed eseguire il debug dell’applicazione in modo più rapido e migliore, con le informazioni dell'istanza di sviluppo in esecuzione iniettate nel browser.

Viene fornito come modulo sperimentale e fornisce le visualizzazioni direttamente all'interno dell’app. 

Una volta installato il modulo, aggiungerà una piccola icona nella parte inferiore della tua app. Cliccandola si aprirà il pannello DevTools.

Nuxt 3 - Nuxt Bridge

Nuxt Bridge è un livello diciamo “ponte” creato per semplificare il passaggio di un’applicazione da Nuxt 2 a Nuxt 3, permettendoci di sperimentare molte delle nuove funzionalità di Nuxt 3, partendo da un’applicazione Nuxt 2.

In questo modo, il passaggio da Nuxt 2 a Nuxt 3 può essere effettuato gradualmente.
Usando Nuxt Bridge possiamo assicurarci che il progetto sia pronto per passare a Nuxt 3.

Per provare le funzionalità di Nuxt 3 nei progetti Nuxt 2 esistenti, bisogna installare @nuxt/bridge-edge nel progetto.

Nuxt 3 - generare progetto con Nuxi

Per generare un progetto Nuxt3 (esempio nuxt3-starter) con la cli di nuxt usiamo i seguenti comandi:

npx nuxi init nuxt3-starter

I passaggi successivi sono

entrare nella cartella del progetto

cd nuxt3-starter

installazione dipendenze

npm install

Ora che abbiamo il progetto base generato proviamo a creare un template: per esempio proviamo a generare una pagina (una-pagina-di-esempio)

npx nuxi add page una-pagina-di-esempio

notiamo che sotto la cartella pages abbiamo un file una-pagina-di-esempio.vue,
al cui interno c’è uno scheletro base

 

Per fare questo abbiamo utilizzato il comando nuxi add

npx nuxi add <TEMPLATE> <NAME>

prevede 2 parametri obbligatori
<TEMPLATE>: tipo del file (esempio: pagina, componente, composable, middleware)
<NAME>:nome del file

possiamo anche specificare dei parametri opzionali prima di <TEMPLATE>

--cwd : la cartella corrente darà il percorso dove risiederà il file creato

--force : permette di sovrascrivere il file se già esistente

Allo stesso modo possiamo creare un componente, un composable o un middleware,

in caso di composable e middleware nuxi creerà un file ts con uno scheletro base di export

Con nuxi possiamo fare la build del progetto

npx nuxi build 

Il comando di build crea un cartella .output con tutta l’app, server e dipendenze pronte per la produzione. Viene creata anche la cartella dist utile per alcuni provider senza compatibilità di configurazione (es Netlify).

Per far partire il server di sviluppo del progetto di default (http://localhost:3000). 

npx nuxi dev

Come parametri opzionali possiamo specificare

-p/-port : per ascoltare una porta specifica

—https : per ascoltare su protocollo https

—dotenv : per puntare a un file .env da caricare

Altri comandi utili possono essere:

npx nuxi upgrade

effettua aggiornamento all’ultima versione di nuxt3

npx nuxi generate

Con questo comando possiamo buildare l’applicazione Nuxt generando pagine HTML statiche. Utile per deploy dell’applicazione con servizi di host statico (es Netlify)

npx nuxi cleanup

fa pulizia rimuovendo i file generatI e le dipendenze:
.nuxt

.output

node_modules/.vite

node_modules/.cache