Vue.js 3 e Composition API — Sviluppo Web Reattivo e Scalabile per Applicazioni Moderne

Hai un progetto Vue 2 che inizia a scricchiolare perché la logica si duplica tra componenti? O stai iniziando un nuovo frontend e vuoi sapere se Vue 3 con Composition API è la scelta giusta rispetto a React o Angular? Noi di Meteora Web lavoriamo con Vue 3 in produzione da quando è uscito (e prima con Vue 2). Abbiamo visto progetti crescere, migrare e qualche volta incagliarsi. In questa pillar page ti diamo tutto quello che serve per usare Vue.js 3 e Composition API con cognizione di causa: costi, benefici, pattern reali e codice funzionante. Non trovi la solita guida marketing; trovi quello che abbiamo imparato su progetti veri, con clienti che non vogliono solo codice bello, ma software che scala e si mantiene.

Cosa cambia tra Vue.js 3 e Vue 2? — Perché passare al nuovo standard?

Vue 3 non è solo un aggiornamento di versione. È un rewriting completo del framework con performance migliori del 40-50% (virtual DOM riscritto, compilatore più intelligente) e un ecosistema pensato per applicazioni grandi e complesse. La novità più evidente è la Composition API, ma ci sono anche:

• Teleport: spostare markup fuori dal componente (modali, tooltip) senza hack.
• Suspense: gestire componenti asincroni con stati di caricamento nativi.
• Fragments: più radice in un template senza wrapper inutili.
• TypeScript first: supporto nativo senza layer extra.
• Vite come strumento di build predefinito (non più webpack).

Quando migrare? Se inizi un nuovo progetto, parte da Vue 3 senza pensarci. Se hai un Vue 2 esistente, valuta il rapporto costo/beneficio: migrare un intero e-commerce di medie dimensioni può richiedere settimane. Noi di Meteora Web lo facciamo quando il cliente richiede nuove feature che beneficiano della Composition API (es. dashboard interattiva con timer e chiamate API) o quando il bundle attuale sta diventando lento.

Vue 3 è retrocompatibile?

No, ci sono breaking changes. Le maggior parte delle opzioni di Vue 2 (Options API) funzionano ancora, ma alcune API globali sono cambiate (Vue.prototype diventa app.config.globalProperties). I lifecycle beforeDestroy e destroyed sono rinominati in beforeUnmount e unmounted. La migrazione è documentata ufficialmente, ma richiede test.

Composition API vs Options API: quale scegliere per il tuo progetto?

Questa è la domanda che ci fanno più spesso. La risposta è: dipende dalla complessità. L'Options API (data, methods, computed) è perfetta per componenti semplici o per chi arriva da Vue 2. La Composition API (setup()) permette di organizzare la logica per feature, non per opzioni. Se hai un componente con 5+ funzionalità diverse (autenticazione, filtri, animazioni, chiamate API), la Composition API evita il caos.

Quando usare l'Options API

• Componenti semplici (un pulsante, una card).
• Team poco familiari con la Composition API.
• Prototipi veloci che non devono essere mantenuti a lungo.

Quando usare la Composition API

• Logica condivisibile (composables).
• Componenti con molte reattività e side effect.
• Progetti con TypeScript.
• Applicazioni che scaleranno oltre le 100 righe di template.

Noi, di Meteora Web, usiamo la Composition API per ogni nuovo componente, anche se piccolo. Perché? Perché una volta che impari ref e computed, è più lineare e abitua il team a scrivere codice modulare. Non c'è motivo di mantenere due stili.

Come usare ref, reactive, computed e watch in Vue 3?

La base della Composition API sono le funzioni di reattività. ref per valori singoli (anche oggetti), reactive per oggetti annidati, computed per derivazioni, watch per effetti collaterali.

import { ref, reactive, computed, watch } from 'vue'

const count = ref(0)
const user = reactive({ name: 'Mario', age: 30 })

const double = computed(() => count.value * 2)

watch(count, (newVal, oldVal) => {
  console.log(`count cambiato da ${oldVal} a ${newVal}`)
})

Consiglio pratico: usa ref sempre, anche per oggetti. reactive perde reattività su proprietà annidate se non usi toRefs. Noi preferiamo ref per coerenza e perché funziona meglio con TypeScript.

Pinia: come gestire lo stato globale in Vue 3?

Addio Vuex. Pinia è il nuovo store ufficiale di Vue 3: più semplice, TypeScript-friendly, con devtools integrati. Non servono mutations, solo actions e getters. Esempio:

import { defineStore } from 'pinia'

export const useCartStore = defineStore('cart', {
  state: () => ({
    items: []
  }),
  getters: {
    total: (state) => state.items.reduce((sum, item) => sum + item.price, 0)
  },
  actions: {
    addItem(item) {
      this.items.push(item)
    }
  }
})

                                                        
                                                                            

Installazione: npm install pinia, registra in main.js come plugin. Noi lo usiamo in tutti i progetti Vue 3, anche quelli piccoli, perché toglie il mal di testa della gestione dello stato ed è più leggero di Vuex.
                                                        
                                                                            

Vue Router 4: routing avanzato con lazy loading e navigation guards?
Vue Router 4 è stato riscritto per TypeScript e vite. Lazy loading si fa con dynamic import:
                                                        
                                                                            

const routes = [
  {
    path: '/dashboard',
    component: () => import('./views/Dashboard.vue')
  }
]


Navigation guards globali (beforeEach) per autenticazione o logging. Esempio di guardia che controlla il token:
                                                                                                                        

                                    
Sponsored Protocol
                                    

                                                                                                                                                                            


                                                                                                                        
                                
                            
                                                                            

router.beforeEach((to, from) => {
  const isLoggedIn = useAuthStore().isLoggedIn
  if (to.meta.requiresAuth && !isLoggedIn) {
    return '/login'
  }
})


Usiamo to.meta per passare dati come titolo della pagina o permessi. Questo evita di intasare il componente con logica di routing.
                                                        
                                                                            

Nuxt 3: SSR, SSG e hybrid rendering con Vue?
Nuxt 3 è il framework metaframework per Vue 3. Offre Server-Side Rendering (SSR) per SEO, Static Site Generation (SSG) per siti veloci, e hybrid rendering (decidi pagina per pagina). Noi lo usiamo per clienti che hanno bisogno di performance SEO e velocità di caricamento (es. e-commerce, blog aziendali).
                                                        
                                                                            

Nuxt 3 include: file-based routing, auto-import di componenti, variabili d'ambiente lato server, moduli (Pinia, Tailwind, etc.). Esempio di server route:
                                                        
                                                                            

// server/api/hello.ts
export default defineEventHandler(() => {
  return { message: 'Ciao dal server' }
})


Attenzione: Nuxt aggiunge complessità al deploy. Se il tuo progetto è una semplice SPA senza SEO, Vue 3 + Vite basta e avanza.
                                                        
                                                                            

Vue con TypeScript: come tipizzare componenti e store?
Vue 3 è scritto in TypeScript, e la Composition API si sposa alla perfezione con la tipizzazione. Usa defineComponent per ottenere inferenza, defineProps e defineEmits per vincolare input e output.
                                                        
                                                                            

import { defineComponent, ref, PropType } from 'vue'

interface User {
  id: number
  name: string
}

export default defineComponent({
  props: {
    user: {
      type: Object as PropType,
      required: true
    }
  },
  setup(props) {
    const fullName = computed(() => `${props.user.name}`)
    return { fullName }
  }
})


Per Pinia, lo store è tipizzato automaticamente. Per Nuxt, i dati delle API sono tipabili con interfacce. Questo riduce gli errori runtime – noi abbiamo notato un calo del 30% di bug in produzione su progetti Vue 3 con TypeScript.
                                                                                                                        

                                    
Sponsored Protocol
                                    

                                                                                                                                                                            


                                                                                                                        
                                
                            
                                                                            

Composables in Vue 3: come riutilizzare logica come i Custom Hooks di React?
I composables sono funzioni che usano la Composition API per incapsulare logica riutilizzabile. Esempio: useCounter:
                                                        
                                                                            

// composables/useCounter.js
import { ref, computed } from 'vue'

export function useCounter(initial = 0) {
  const count = ref(initial)
  const double = computed(() => count.value * 2)
  function increment() { count.value++ }
  return { count, double, increment }
}


In un componente:
                                                        
                                                                            

import { useCounter } from '@/composables/useCounter'

setup() {
  const { count, double, increment } = useCounter(10)
  return { count, double, increment }
}


Usiamo composables per tutto: chiamate API (useFetch), gestione form, timer, autenticazione. È il modo più pulito per evitare duplicazione di codice tra componenti. Attenzione: un composable non deve creare effetti collaterali fuori controllo; gestisci sempre il cleanup con onUnmounted.
                                                        
                                                                            

Vue Testing con Vitest e Vue Test Utils: come testare componenti?
Vitest è il runner di test nativo per Vite, simile a Jest ma più veloce. Con @vue/test-utils puoi montare componenti, simulare eventi e verificare output.
                                                        
                                                                            

import { mount } from '@vue/test-utils'
import Counter from './Counter.vue'

describe('Counter', () => {
  it('incrementa al click', async () => {
    const wrapper = mount(Counter)
    await wrapper.find('button').trigger('click')
    expect(wrapper.text()).toContain('1')
  })
})


Noi testiamo sempre composables e componenti critici (es. pagamenti, form important). Il costo iniziale è ripagato dalla regressione evitata. Inoltre, con TypeScript, i test sono più facili da scrivere.
                                                                                                                        

                                    
Sponsored Protocol
                                    

                                                                                                                                                                            


                                                                                                                        
                                
                            
                                                                            

Teleport, Suspense e componenti built-in avanzati: cosa sono e quando usarli?
Vue 3 offre componenti built-in che risolvono problemi comuni:
                                                        
                                                                            

Teleport: sposta il markup in un altro nodo DOM (es. modali fuori dal componente).
Suspense: gestisce componenti asincroni (caricamento lento) mostrando un fallback.
KeepAlive: mantiene in vita componenti dismessi (utile per tab).
Transition e TransitionGroup: animazioni native.


Esempio di Teleport per una modale:
                                                        
                                                                            


  

    
Contenuto modale
                                                        
                                                                            
  



Suspense è ancora sperimentale in Vue 3.2, ma lo usiamo con cautela in produzione solo per componenti lazy. Teleport è maturo e lo usiamo sempre per overlay.
                                                        
                                                                            

Cosa fare adesso
Se sei arrivato qui, hai già le basi per usare Vue.js 3 e Composition API in modo professionale. Ecco i passi immediati:
                                                        
                                                                            

Inizia un piccolo progetto: crea un nuovo progetto con npm create vue@latest e scegli Composition API + TypeScript. Segui il tutorial ufficiale.
Sostituisci Vuex con Pinia nel prossimo progetto: meno boilerplate, più performance. Leggi la documentazione ufficiale.
Scrivi un composable: prendi una logica che ripeti (es. fetch dati) e trasformala in un composable. Lo userai in tutti i progetti.
Testa un componente critico: installa Vitest e Vue Test Utils, scrivi un test per un componente che gestisce un form. Vedrai quanto dà sicurezza.
Valuta Nuxt 3 se il tuo progetto ha bisogno di SEO o SSR. Fai un benchmark con un semplice blog.

Se hai bisogno di supporto su un progetto esistente o vuoi migrare da Vue 2, contattaci. Noi di Meteora Web lo facciamo ogni giorno, con clienti in tutta Italia.