UI library

Librerie UI per Vue 3 nel 2026: quattro famiglie a confronto

Vue 3 ha meno librerie React, ma abbastanza per scegliere con criterio. Quattro famiglie, licenze, costi nascosti e quando conviene il copy-paste.

In sintesi

  • Vue non è React con un’altra sintassi: cambiano reattività, slot e modello di theming.
  • Le famiglie sono quattro: design system completo, copy-paste, headless, componenti singoli.
  • La licenza del core non copre template e temi premium: verifica sempre il pacchetto.

La domanda “quale libreria UI per Vue 3?” ha una risposta breve: dipende da quanto vuoi possedere. Vue premia la composizione tramite slot, quindi i componenti headless si integrano bene, ma il design system completo resta la via più rapida.

Le quattro famiglie

FamigliaEsempiPunto forteLimite
Design system completoVuetify, PrimeVue, Naive UIMolti componenti, tema prontoVisione e API del fornitore
Copy-pasteshadcn-vueCodice tuo, stile adattabileAggiornamenti manuali
HeadlessReka UI, Headless UI VueAccessibilità delegataDevi scrivere ogni stile
Componenti singoliVueUse, componenti di nicchiaPeso minimoNessuna coerenza d’insieme

Vuetify è la scelta “batterie incluse”: theme provider, griglia, direttive, molti componenti. PrimeVue offre un catalogo ampio con un core permissivo e template a pagamento. Naive UI punta su TypeScript e temi programmatici. Sono tre prodotti diversi, non tre gusti.

Licenze: dove si sbaglia

  • Vuetify: licenza MIT sul core.
  • PrimeVue: core MIT; template e blocchi premium hanno termini propri.
  • Naive UI: MIT.
  • shadcn-vue: MIT, come il modello shadcn.
  • Reka UI: MIT.

Il core gratuito non implica che tutto il pacchetto sia gratuito. Controlla il singolo template o tema prima di inserirlo in un prodotto commerciale.

Theming: la differenza con React

In Vue il tema passa spesso da un plugin e da variabili iniettate, non solo da CSS. Se adotti Vuetify, il suo theme provider diventa la fonte di verità: aggiungere un secondo layer di token senza mappatura produce due palette.

// Se usi token tuoi, mappa una volta sola
import { createVuetify } from 'vuetify'

export const vuetify = createVuetify({
  theme: {
    defaultTheme: 'light',
    themes: {
      light: {
        colors: {
          primary: 'var(--ui-accent)',
          surface: 'var(--ui-bg)',
        },
      },
    },
  },
})

Quando scegliere cosa

  • Dashboard interna con molti form e tabelle: design system completo.
  • Sito marketing con identità forte: copy-paste o headless più stili tuoi.
  • Prodotto piccolo con pochi componenti: componenti singoli, senza framework.
  • Team che migra da React: headless più token, per riusare le competenze.

EneUI indicizza componenti Vue accanto a quelli React, dentro un catalogo di 1.472 librerie (31 ottobre 2026). Il filtro per framework serve a non confrontare ecosistemi diversi come se fossero la stessa cosa.

Cosa non fare

Non installare due design system completi nello stesso progetto. Non copiare componenti React e tradurli a mano in Vue: le differenze di reattività e slot producono bug silenziosi.

Domande frequenti

Vuetify è la scelta migliore per Vue 3?

È la scelta più completa, non sempre la migliore. Se il design è specifico, il costo di sovrascrivere il tema può superare il risparmio.

shadcn-vue è ufficiale?

È un port del modello shadcn, non un progetto del team originale. Verifica manutenzione e licenza del repository che usi.

Posso usare PrimeVue gratis?

Il core è MIT. Template, blocchi e temi premium possono avere termini commerciali: controlla il pacchetto specifico.

Quale libreria ha meno dipendenze?

Di solito le headless e i componenti singoli. Un design system completo porta con sé più codice condiviso.

Vue o React per un catalogo di componenti?

Dipende dagli utenti e dal team. Il catalogo EneUI pubblica entrambi: la scelta non dipende dalla disponibilità dei componenti.