Come installare Vue.js su Ubuntu 22.04

Installa Vue.js su Ubuntu 22.04 senza complicazioni inutili

Se devi partire con Vue.js su Ubuntu 22.04, la scelta giusta non è installare solo il framework e basta: serve anche un runtime JavaScript recente, in pratica Node.js, più un gestore pacchetti affidabile. Vue oggi si usa quasi sempre tramite il suo toolchain ufficiale, quindi l’obiettivo non è solo “avere Vue”, ma mettere in piedi un ambiente che ti permetta di creare, avviare e mantenere un progetto in modo pulito.

Su Ubuntu 22.04 hai già una base solida, ma i pacchetti nei repository standard non sono sempre allineati con le versioni più comode per lo sviluppo frontend. Per questo conviene usare un percorso controllato: aggiornare il sistema, installare Node.js con una versione adatta, verificare npm o un’alternativa come pnpm, poi creare il progetto Vue con lo strumento ufficiale. Così eviti di ritrovarti con dipendenze vecchie, errori di build o incompatibilità con plugin moderni.

Prerequisiti da controllare prima di iniziare

Prima di installare Vue.js, verifica che il sistema sia aggiornato e che tu abbia accesso amministrativo. Non serve fare magie: basta sapere che stai lavorando su una macchina Ubuntu 22.04 correttamente configurata, con rete funzionante e spazio disco sufficiente per i pacchetti e le dipendenze di sviluppo.

Il primo controllo utile è questo:

lsb_release -a

Atteso: Ubuntu 22.04.x. Se non lo è, la procedura può cambiare leggermente, soprattutto per i repository e per la versione di Node.js consigliata.

Controlla anche che il sistema sia aggiornato:

sudo apt update && sudo apt upgrade -y

Se il server o la VM è usata anche per altro, valuta l’impatto degli aggiornamenti prima di procedere. Su ambienti di produzione o condivisi, questa parte va trattata come change controllato, non come semplice installazione locale.

Installa Node.js su Ubuntu 22.04

Vue.js dipende dall’ecosistema Node. Senza Node.js non vai lontano, perché il progetto Vue moderno usa tool come Vite, npm e pacchetti JavaScript per build e sviluppo locale. La scelta più semplice è installare una versione recente e supportata di Node.js dal repository ufficiale NodeSource oppure usare un gestore versioni come nvm se devi gestire più progetti con requisiti diversi.

Se vuoi un’installazione di sistema semplice e lineare, puoi usare NodeSource. Per Ubuntu 22.04, una versione LTS di Node è di solito la scelta più equilibrata.

curl -fsSL https://deb.nodesource.com/setup_lts.x | sudo -E bash -

Poi installa Node.js:

sudo apt install -y nodejs

Verifica subito le versioni installate:

node -v

npm -v

Atteso: una versione di Node recente e npm disponibile. Se uno dei due comandi fallisce, il problema non è Vue ma l’ambiente Node. In quel caso conviene sistemare prima il runtime, non andare avanti a tentoni.

Se preferisci un approccio più flessibile, soprattutto su workstation di sviluppo, nvm è spesso la soluzione migliore perché permette di cambiare versione di Node per progetto. Il rovescio della medaglia è che richiede una gestione più attenta della shell e del profilo utente. Su server o ambienti standardizzati, la versione di sistema è più prevedibile.

Scegli il gestore pacchetti: npm, pnpm o yarn

Con Node.js installato, hai già npm. Per iniziare va benissimo. Se vuoi un ecosistema più efficiente in termini di spazio e velocità, pnpm è una buona opzione. Yarn è ancora presente in molti ambienti, ma oggi per un nuovo progetto Vue la combinazione Node.js + npm o Node.js + pnpm è spesso la scelta più semplice.

Verifica che npm sia operativo:

npm config get registry

Atteso: https://registry.npmjs.org/ oppure il registry aziendale se sei dietro proxy o mirror interni.

Se lavori in rete aziendale con proxy o firewall, qui emergono spesso i problemi reali: certificati MITM, registry bloccati, DNS interni errati, timeout. Non è un problema di Vue, ma dell’accesso ai repository npm. In quel caso controlla prima con un semplice test di rete verso il registry, poi correggi proxy o CA.

Crea un nuovo progetto Vue con lo strumento ufficiale

Oggi il modo consigliato per iniziare è usare create-vue, che genera un progetto Vue moderno basato su Vite. È più pulito rispetto ai vecchi setup manuali e ti evita di assemblare a mano la configurazione iniziale.

Puoi creare il progetto così:

npm create vue@latest

Durante l’esecuzione ti verranno chieste alcune opzioni: nome del progetto, supporto TypeScript, router, Pinia, test, linting. Qui non esiste una risposta unica: dipende dal progetto. Se devi partire veloce per un prototipo, tieni il setup minimale. Se stai costruendo una base destinata a crescere, abilita almeno router e linting.

Dopo la creazione entra nella cartella del progetto:

cd nome-progetto

Installa le dipendenze:

npm install

Se vuoi usare pnpm, il flusso è simile, ma va installato e usato coerentemente dall’inizio alla fine. Mischiare npm e pnpm nello stesso progetto è una fonte classica di confusione. Scegline uno e mantienilo.

Avvia il progetto in locale e verifica che funzioni

Una volta installate le dipendenze, avvia il server di sviluppo:

npm run dev

Atteso: un output che indica l’indirizzo locale, di solito http://localhost:5173/ o una porta simile. Apri quell’indirizzo nel browser e verifica che la pagina iniziale di Vue sia visibile.

Se lavori via SSH su un server remoto e vuoi aprire il dev server dal tuo PC, puoi usare un tunnel SSH. È una soluzione comoda per test rapidi, ma non va confusa con il deploy. Il server di sviluppo di Vue non è pensato per essere esposto direttamente in produzione.

Se la pagina non si apre, controlla prima questi punti:

• il processo è ancora attivo;
• la porta non è bloccata dal firewall;
• stai puntando all’host corretto;
• non ci sono errori in console o nel terminale;
• il browser non sta caricando una cache vecchia.

Struttura minima di un progetto Vue moderno

In un progetto creato con create-vue, di solito trovi una struttura simile a questa:

• src/ contiene il codice applicativo;
• src/main.js o src/main.ts è il punto di ingresso;
• src/App.vue è il componente principale iniziale;
• vite.config.* gestisce la configurazione del bundler;
• package.json definisce gli script e le dipendenze.

Il file più importante per iniziare è src/App.vue. Se vuoi fare una prova rapida, modifica il contenuto e salva. Con il dev server attivo, il browser dovrebbe aggiornarsi quasi subito grazie all’hot reload.

Esempio minimale di componente Vue:

<template>
  <h1>Ciao Vue su Ubuntu 22.04</h1>
</template>

Se vedi il testo nel browser, la catena base funziona: Node, npm, installazione dipendenze, build locale e rendering del componente.

Installa Vue come libreria in un progetto esistente

Non sempre devi creare un progetto nuovo. A volte hai già una base frontend e vuoi integrare Vue in un’app esistente. In quel caso il discorso cambia: non fai un “setup da zero”, ma aggiungi Vue come dipendenza e lo colleghi al tuo bundler attuale.

In un progetto già esistente, installa Vue così:

npm install vue

Poi verifica che il bundler supporti i file .vue. Con Vite di solito il supporto è semplice, ma con setup più vecchi può servire un plugin dedicato. Se il progetto usa Webpack o configurazioni legacy, la parte critica non è il pacchetto Vue in sé, ma l’integrazione della pipeline di build.

In questi casi la domanda giusta non è “come installo Vue”, ma “il mio stack di build sa compilare i single-file components?”. Se la risposta è no, l’errore va risolto lì.

Configurazione utile per sviluppo quotidiano

Per lavorare bene con Vue su Ubuntu 22.04 conviene tenere alcune abitudini sane. La prima è usare script chiari in package.json. La seconda è non improvvisare con versioni diverse di Node tra un ambiente e l’altro. La terza è tenere separati sviluppo e produzione.

Controlla gli script disponibili:

cat package.json

Di solito troverai comandi come dev, build e preview. Questi sono i tre punti da conoscere bene:

• dev: avvio in sviluppo con hot reload;
• build: generazione dei file pronti per produzione;
• preview: verifica locale della build finale.

Prima di pensare al deploy, esegui sempre una build:

npm run build

Atteso: creazione della cartella di output, spesso dist/, senza errori. Se la build fallisce, non è il momento di pubblicare nulla. Prima correggi il problema di compilazione, poi ripeti il test.

Come pubblicare un’app Vue dopo l’installazione

Vue non si installa su un server come un demone da tenere acceso. In produzione, normalmente carichi i file statici generati dalla build su un web server come Nginx, Apache o un CDN. Questo è un punto importante: il server di sviluppo non è un ambiente di produzione.

Il flusso tipico è:

1. sviluppi in locale;
2. esegui npm run build;
3. carichi il contenuto di dist/ sul web server;
4. configuri il web server per servire il frontend e gestire le route lato client.

Se usi Vue Router in modalità history, il web server deve fare fallback su index.html per le route non trovate. Altrimenti vedrai 404 quando aggiorni una pagina interna. Questo non è un bug di Vue, è una configurazione web server incompleta.

Con Nginx, per esempio, devi assicurarti che le richieste delle route SPA vengano reindirizzate correttamente. Con Apache il concetto è lo stesso, cambia solo la sintassi della configurazione.

Errori comuni durante l’installazione

Il primo errore classico è avere una versione di Node troppo vecchia. Sintomo: installazione di dipendenze che fallisce, warning a cascata o build che non parte. Verifica sempre con node -v e aggiorna se necessario.

Il secondo errore è usare più gestori pacchetti insieme senza disciplina. Se inizi con npm, resta su npm. Se scegli pnpm, usa pnpm dall’inizio alla fine. Mischiare lockfile diversi, come package-lock.json e pnpm-lock.yaml, crea confusione e risultati poco riproducibili.

Il terzo errore è ignorare i problemi di rete. Se npm install va in timeout, non è detto che il problema sia il progetto. Potrebbe essere DNS, proxy, certificati o un registry non raggiungibile. In quel caso testare con un semplice comando di rete è più utile che reinstallare tutto.

Il quarto errore è confondere sviluppo e produzione. Un’app Vue che funziona con npm run dev può comunque rompersi in build o in deploy se mancano variabili d’ambiente, route corrette o configurazioni del server web.

Controllo finale dell’ambiente

Per chiudere l’installazione in modo pulito, fai questa verifica minima:

node -v
npm -v
npm create vue@latest
npm run build

Se questi passaggi funzionano, hai un ambiente Vue operativo su Ubuntu 22.04. A quel punto puoi passare allo sviluppo del progetto, aggiungere router, state management, test e integrazioni con API backend.

Se invece qualcosa si rompe, non partire subito da Vue. Risali la catena: sistema operativo, Node.js, package manager, dipendenze, build tool, poi applicazione. È il modo più veloce per isolare il problema senza perdere tempo.

Scelta pratica consigliata

Se vuoi una risposta secca: su Ubuntu 22.04 installa Node.js LTS, usa npm o pnpm in modo coerente, crea il progetto con npm create vue@latest e verifica con npm run dev e npm run build. Questo è il percorso più pulito per avere Vue.js pronto all’uso senza assemblare a mano una toolchain fragile.

Per un ambiente di sviluppo standard, questa è la combinazione più lineare. Per ambienti aziendali o server condivisi, valuta invece una gestione versione per versione con nvm o container, così isoli meglio le dipendenze e riduci gli attriti tra progetti diversi.

Nota pratica: se l’obiettivo è solo “far partire Vue”, il minimo vero non è il framework da solo, ma Vue + Node.js + un package manager + una build ripetibile.

Assunzione: stai lavorando su una macchina Ubuntu 22.04 con accesso sudo e connettività verso il registry npm.