Capitolo 1 di 11

Tutorial VueJS 3 – Creare un’applicazione Vue con Vite

verificato il 7 Settembre 2026 · 5 min

Risposta rapida

Crea il progetto con npm create vue@latest, rispondi «no» a TypeScript, poi npm install e npm run dev. Un'applicazione Vue nasce da createApp(App).mount('#app'), un dato dichiarato con ref() si mostra nel template tra doppie graffe e si aggiorna da solo.

Alla fine di questo capitolo, avrai un progetto Vue 3 che gira e saprai mostrare un dato reattivo a schermo.

Un’applicazione Vue è un’istanza creata da createApp e agganciata a un elemento della pagina. Questo capitolo installa il progetto, poi mostra un primo dato a schermo.

Creare il progetto

Vue mette a disposizione un generatore ufficiale, create-vue, che prepara un progetto Vite già configurato per Vue. Apri un terminale nella cartella dove tieni i tuoi progetti:

bash
npm create vue@latest

Il generatore fa una serie di domande. Per questo tutorial, rispondi:

  • Project name: boutique-vue
  • TypeScript: No, restiamo in JavaScript per non mescolare due apprendimenti.
  • JSX, Vue Router, Pinia, ESLint, Prettier: No. Li aggiungeremo quando serviranno.
  • Vitest: Sì se vuoi scrivere dei test, altrimenti No.
Attenzione all’opzione –default

Molti tutorial suggeriscono npm create vue@latest -- --default per «fare prima». In create-vue 3.23 questo flag attiva TypeScript: ti ritrovi un src/main.ts e dei file tsconfig, che non è quello che vuoi qui. Meglio rispondere alle domande.

Installa le dipendenze, poi avvia il server di sviluppo:

npm install fallisce con l’npm di Node 22

Su Node 22, l’npm fornito (10.9) si ferma con npm error Cannot read properties of null (reading 'edgesOut'), su un progetto nuovo come sul codice di questo tutorial. Aggiornate npm prima di installare: npm install -g npm@latest. Node 24 non ha questo problema.

bash
cd boutique-vue
npm install
npm run dev

Vite stampa un indirizzo, di solito http://localhost:5173/. Aprilo: compare la pagina iniziale del progetto.

Che cosa ha creato il generatore

bash
boutique-vue/
├── index.html          ← la seule vraie page HTML du site
├── package.json
├── vite.config.js
├── public/             ← fichiers servis tels quels
└── src/
    ├── main.js         ← point d’entrée : crée et monte l’application
    ├── App.vue         ← composant racine
    ├── assets/
    └── components/

Tre file contano per ora. Il generatore crea anche src/assets/main.css e base.css, lo stile della sua pagina iniziale: potrete eliminarli, insieme alla riga import './assets/main.css' che apre src/main.js, quando il CSS del tutorial li sostituirà a fine capitolo.

index.html contiene un contenitore vuoto e carica il punto di ingresso. Tutto qui: il resto della pagina lo produrrà Vue.

index.html
<body>
  <div id="app"></div>
  <script type="module" src="/src/main.js"></script>
</body>

src/main.js crea l’applicazione a partire dal componente radice e la monta in quel contenitore.

src/main.js
import './assets/main.css'

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

createApp(App) costruisce l’istanza, .mount('#app') le assegna l’elemento del DOM che ha il diritto di gestire. Da lì in poi, tutto quello che sta dentro <div id="app"> appartiene a Vue.

Il primo componente

Un file .vue è un componente monofile: script, template e stile dello stesso pezzo di interfaccia stanno nello stesso posto. Svuota src/App.vue e scrivi:

src/App.vue
<script setup>
import { ref } from 'vue'

const product = ref('T-Shirt')
</script>

<template>
  <div class="product-display">
    <h1>{{ product }}</h1>
  </div>
</template>

Salva: il browser mostra «T-Shirt» senza ricaricare. È l’hot module replacement di Vite.

Questo file crescerà fino al capitolo sui componenti, dove lo spezzeremo.

Capire queste sette righe

<script setup> dice a Vue che il blocco descrive la logica del componente. Tutto quello che dichiari al primo livello è utilizzabile nel template, senza esportare niente.

ref('T-Shirt') crea un riferimento reattivo: una scatola che contiene un valore e avvisa Vue quando cambia. Nello script la scatola si apre con .value:

javascript
const product = ref('T-Shirt')

console.log(product.value)   // 'T-Shirt'
product.value = 'Pull'       // il titolo cambia subito a schermo

Nel template, invece, si scrive {{ product }} senza .value: l’unwrap del riferimento lo fa Vue da solo.

Le doppie graffe sono un’interpolazione. Accettano qualsiasi espressione JavaScript, non solo il nome di una variabile:

html
<h1>{{ product }}</h1>
<h1>{{ product.toUpperCase() }}</h1>
<h1>{{ 'Notre ' + product }}</h1>

La reattività, in concreto

Cambia il valore iniziale in 'Pull' e salva: il titolo segue. Non hai scritto una riga per andare a prendere l’h1 e modificarne il contenuto. È il cuore di Vue: tu descrivi che cosa deve mostrare la pagina in funzione dello stato, all’aggiornamento pensa Vue.

Con la Options API

Lo stesso componente si scriverebbe export default { data() { return { product: 'T-Shirt' } } }, e lo script vi accederebbe con this.product. Con <script setup>, this non esiste: ci sono solo variabili.

E gli altri strumenti di build?

create-vue installa Vite, lo strumento consigliato dal team di Vue. Anche altri bundler compilano i file .vue: Parcel tramite @parcel/transformer-vue, oppure webpack con vue-loader.

Funzionano, ma sono più lenti e fuori dai percorsi battuti. Misurato il 2 settembre 2026 sulla stessa applicazione di un solo componente:

bash
Vite 8.2.2     build en  1,05 s   →  60,57 kB  (23,91 kB gzip)
Parcel 2.16.4  build en 10,57 s   →  92,77 kB

Il risultato di npm run build è una cartella di file statici. Quello che contiene decide il tuo posizionamento sui motori di ricerca, argomento trattato a parte.

Per un progetto nuovo resta su Vite. Le alternative si giustificano solo se la tua catena di build attuale ne dipende già.

Il CSS del tutorial

Perché l’applicazione abbia un aspetto decente, crea src/assets/boutique.css con le poche regole usate lungo tutti i capitoli:

src/assets/boutique.css
.product-display { display: flex; gap: 32px; padding: 24px; font-family: system-ui, sans-serif; }
.product-image img { width: 240px; }
.variants-wrapper { display: flex; gap: 10px; }
.color-circle { width: 50px; height: 50px; margin-top: 8px; border: 2px solid #d8d8d8; border-radius: 50%; cursor: pointer; }
.button { border: none; background: #1d4ed8; color: #fff; padding: 10px 18px; border-radius: 6px; cursor: pointer; }
.disabledButton { background-color: #d8d8d8; cursor: not-allowed; }

E importalo nel punto di ingresso:

src/main.js
import './assets/boutique.css'
import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')
EsercizioAggiungi un dato brand con valore «Gekkode» e mostralo nel titolo, prima del nome del prodotto. Poi cambia il suo valore nel codice e verifica che la pagina si aggiorni senza ricaricare.

Errori frequenti

npm create vue@latest -- --default installa TypeScript In create-vue 3.23 il flag --default attiva TypeScript: ti ritrovi un src/main.ts e dei tsconfig. Lancia il comando senza flag e rispondi «no» alla domanda su TypeScript.
Dimenticare .value nello script ref() restituisce un oggetto. Nello script scrivi product.value, nel template basta {{ product }}, l'unwrap lo fa Vue.
Una versione di Node troppo vecchia create-vue richiede Node 22.18 o superiore. Controlla con node -v prima di creare il progetto.
Newsletter

I nuovi test, tutorial e progetti, via e-mail.

Test riproducibili, codice versionato, risultati datati. Mai spam.