Tutorial VueJS 3 per principianti: guida in 11 capitoli

Vue.js è un framework JavaScript progressivo: lo puoi aggiungere a una pagina esistente con un tag script, oppure costruirci un’applicazione completa con uno strumento di build. Questo tutorial prende la seconda strada, quella seguita dalla documentazione ufficiale e dalla quasi totalità dei progetti di oggi.

In undici capitoli costruisci un piccolo negozio: una scheda prodotto con le sue varianti di colore, un carrello, un modulo per le recensioni e le animazioni che le accompagnano. Ogni nozione arriva nel momento in cui l’applicazione ne ha bisogno, mai prima.

Che cosa costruirai

Una sola applicazione, arricchita capitolo dopo capitolo. Alla fine mostra un prodotto e la sua immagine, reagisce al passaggio del mouse sui colori, disabilita il pulsante quando la variante è esaurita, riempie un carrello, accetta recensioni validate e le anima quando compaiono.

Il codice viene spezzato in componenti a partire dal capitolo 8, come in un progetto vero.

Il percorso in undici capitoli

1. Creare un’applicazione Vue, il progetto, createApp, il primo dato reattivo.
2. Binding degli attributi, mostrare l’immagine del prodotto con v-bind.
3. Rendering condizionale, dire se il prodotto è disponibile, con v-if e v-show.
4. Rendering di liste, la composizione del tessuto e le varianti, con v-for.
5. Gestione degli eventi, il pulsante che riempie il carrello.
6. Binding di classi e stili, i pallini di colore e il pulsante disabilitato.
7. Proprietà calcolate, dedurre l’immagine e la disponibilità dalla variante scelta.
8. Componenti e props, spezzare l’applicazione e passare dati.
9. Comunicazione degli eventi, far risalire il clic verso il componente genitore.
10. Form e v-model, il modulo delle recensioni e la sua validazione.
11. Transizioni, animare comparse e sparizioni.

Il codice completo è scaricabile in cima alla pagina: un progetto Vite con una cartella per capitolo e la suite di test che li verifica uno per uno.

Composition API: lo stile di questo tutorial

Vue propone due modi di scrivere un componente. L’Options API sistema il codice dentro delle opzioni: data, methods, computed. La Composition API lo scrive come semplici variabili e funzioni dentro un blocco <script setup>.

Questo tutorial usa la Composition API, perché è lo stile che la documentazione ufficiale consiglia per un progetto nuovo, ed è quello che troverai nella maggior parte del codice scritto da Vue 3 in poi. Entrambi gli stili restano supportati: l’Options API non è deprecata, e la incontrerai ancora a lungo nei progetti esistenti.

Ecco la tabella di corrispondenza, da tenere a portata di mano.

// Composition API, in <script setup>

data() { return { n: 0 } }         const n = ref(0)
computed: { double() { … } }       const double = computed(() => …)
methods: { faire() { … } }         function faire() { … }
props: { titre: String }           const props = defineProps({ titre: String })
emits: ['valider']                 const emit = defineEmits(['valider'])
mounted() { … }                    onMounted(() => { … })
watch: { n(v) { … } }              watch(n, (v) => { … })

this.n                             n.value   // solo nello script,
                                             // mai nel template

Ogni capitolo interessato richiama l’equivalente in Options API della nozione trattata.

Che cosa ti serve

• Le basi di HTML, CSS e JavaScript. Se le funzioni freccia e la destrutturazione non vi dicono nulla, ripassatele prima di iniziare.
• Node.js 22.18 o più recente (oppure 24.12 e successive). Verificate con node -v: il generatore di progetti ufficiale rifiuta le versioni precedenti. Aggiornate anche npm con npm install -g npm@latest: l’npm 10 fornito con Node 22 fallisce sull’npm install di un progetto Vue nuovo.
• Un editor di codice. Visual Studio Code con l’estensione ufficiale « Vue – Official » offre l’autocompletamento nei file .vue. Vanno bene anche WebStorm e Zed.

Non serve nessuna conoscenza di Vue 2. Se arrivi da lì, tieni presente che Vue.use, Vue.mixin e Vue.prototype non esistono più: adesso passa tutto dall’istanza di applicazione restituita da createApp.

Come affrontare questo tutorial

Scrivi il codice invece di copiarlo. Dopo ogni capitolo rompi qualcosa di proposito e leggi il messaggio di errore: è il modo migliore per imparare a decifrarli.

Ogni capitolo finisce con un esercizio che riguarda la nozione appena vista e si risolve con quello che hai scritto.

Dopo questo tutorial

Per collegare l’applicazione a dati veri, vedi come aggiungere Firebase a un’applicazione Vue.

Finiti gli undici capitoli, il seguito naturale è la condivisione dello stato tra componenti con Pinia, poi il routing con Vue Router. Sul fronte architettura, vedi come scrivere i tuoi plugin Vue e come gestire il posizionamento di un’applicazione Vue.