Free VueLityx© Il builder visuale per Vue.js, Vite e Nuxt
POSTED , 26 OTT 2026
Da quando ho iniziato VueLityX l'obiettivo è uno solo: fare per Vue.js quello che Delphi ha fatto per Windows. Un ambiente RAD vero, dove disegni l'interfaccia, colleghi i dati e gli eventi, provi e correggi, senza perdere mai il controllo del codice. Nelle ultime settimane sono arrivate alcune delle funzioni che più avvicinano VueLityX a quell'idea: ecco cosa c'è di nuovo.
- Debugger sull'anteprima, con breakpoint, passo a passo e variabili
- Breakpoint direttamente nell'editor, con un clic sul margine
- Language server Vue (Volar) nell'editor: errori veri, completamento con i tipi, rinomina su tutto il progetto
- Align e Anchors come in Delphi, per i componenti Vue
- Object Repository: componenti e viste riutilizzabili tra progetti
- Esplora database e dati a design time
- Interfaccia in 9 lingue
- FormCapacitorBuilder: dal progetto Vue all'app Android (APK e AAB) con Capacitor
1. Un debugger come quello di Delphi, sull'anteprima
Il menu Debug apre un debugger che lavora direttamente sull'anteprima dell'app, senza DevTools esterni. Si mettono i breakpoint sulle righe dei file .vue e .js del progetto e, quando il codice ci passa, l'esecuzione si ferma.
- Comandi di Delphi: Continua (F9), Passo (F8), Entra (F7), Esci (Maiusc+F8).
- Stack delle chiamate e variabili espandibili: locali, di chiusura, di blocco e del modulo, con i
refmostrati per il loro valore. - Valuta / Modifica: scrivi un'espressione (
conta.value,conta.value = 5) e vedi subito il risultato. - Le righe sono quelle del tuo file: grazie alle source map di Vite, il breakpoint messo alla riga 31 di
Home.vuesi ferma proprio lì, non nel codice generato. - Anche il codice di avvio: "Ricarica pagina" riparte dall'inizio, così ci si ferma anche nello
<script setup>e nel primo disegno del template. - Le librerie si saltano (node_modules, client di Vite) e si sceglie se fermarsi sulle eccezioni.
2. Breakpoint nell'editor, con un clic
Come in Delphi, il breakpoint si mette cliccando sul margine a sinistra dei numeri di riga, oppure con F5 sulla riga del cursore. Compare il pallino rosso; un altro clic lo toglie.
- Funziona anche a debugger chiuso: quando lo apri, i breakpoint sono già lì.
- Se aggiungi o togli righe sopra, il pallino segue il codice.
- Quando il debugger si ferma, la riga in esecuzione è evidenziata in giallo nell'editor.
- Aprendo il debugger, mostra già il file dell'editor alla riga del cursore.
3. L'editor ora "capisce" Vue: arriva il language server
L'editor di codice di VueLityX è basato su Monaco, lo stesso motore di Visual Studio Code. Adesso è collegato anche al language server ufficiale di Vue (Volar), quello che usa VS Code: l'editor non si limita più a colorare il testo, conosce davvero il progetto.
- Errori TypeScript e Vue mentre scrivi, nella lingua dell'IDE: "Il tipo 'string' non è assegnabile al tipo 'number'".
- Completamento con i tipi: scrivendo
<Hellol'editor propone le props del componente figlio. - Import automatici: scegli
computeddall'elenco e l'import davuesi aggiunge da solo. - Tipo al passaggio del mouse e firma dei parametri quando apri la parentesi di una funzione.
- Vai alla definizione (F12 o Ctrl+clic), anche in un altro file, che si apre alla riga giusta; Alt+F12 per l'anteprima al volo.
- Rinomina su tutto il progetto (F2): rinomini una funzione in
App.vuee cambia anche inutils.ts. - Formatta documento, mantenendo gli a-capo del file.
Il language server gira in un piccolo processo Node.js che VueLityX avvia da solo in background (la prima volta installa i pacchetti necessari) e chiude insieme all'IDE. Un pallino "Vue" in basso a destra nell'editor ne mostra lo stato.
4. Align e Anchors, come in Delphi
Chi viene da Delphi conosce bene Align := alClient e Anchors := [akRight, akBottom]. Ora esistono anche per i componenti Vue, come direttive sul tag, e si impostano dall'Object Inspector:
<header v-align="'top'">...</header>
<aside v-align="'left'">...</aside>
<main v-align="'client'">...</main> <!-- riempie lo spazio che resta -->
<button v-anchors="'right,bottom'">OK</button>Dietro c'è CSS moderno (griglia e flex), applicato solo come stile in linea: nessun CSS globale, e togliendo la direttiva l'elemento torna com'era. Funziona con Vite e con Nuxt.
5. Object Repository
L'equivalente di File > New > Other... e Add to Repository di Delphi. Un componente o una vista riuscita si salva nel Repository e si riusa in qualunque progetto, con i suoi file e le dipendenze che richiede.
- Elementi di serie già pronti: barra di stato, finestra di dialogo, pagina con layout, scheda di accesso.
- Elementi personali, salvati nella propria cartella utente.
- Nomi e descrizioni nelle lingue dell'IDE.
6. Esplora database e dati a design time
Esplora database (il Data Explorer di Delphi) si collega al database del backend con FireDAC e mostra tabelle, campi con tipo e chiave, e un'anteprima dei dati. Con un clic, "Crea datasource dalla tabella" aggiunge al DataModule un datasource REST già pronto verso l'API di quella tabella, anche con chiavi composte.
Con i dati a design time l'anteprima si vede piena anche mentre la disegni: dalla combo "Dati" scegli fra dati reali, dati di esempio o datasource spenti. Le griglie mostrano un badge che dice da dove arrivano i dati, così non si confonde mai l'esempio con il vero.
7. Sempre più Delphi: eventi, azioni, struttura
- Scheda Eventi nell'Object Inspector: assegni un gestore scegliendo fra le funzioni dello
<script setup>o creandone uno nuovo, e lo rinomini o lo scolleghi. - ActionList: le azioni del progetto (testo, suggerimento, scorciatoia, abilitazione) in un editor dedicato, e "Collega azione..." mette
v-actionsul componente. - Structure View: l'albero dei componenti, dove si spostano gli elementi trascinandoli e si rilasciano nuovi componenti dalla galleria.
- Crea componente da qui: un pezzo di template diventa un componente nuovo, già importato.
- Annulla / Ripeti di tutte le modifiche fatte dal designer, e il pannello Problemi che porta al file e alla riga dell'errore.
8. VueLityX parla 9 lingue
L'interfaccia è disponibile in italiano, inglese, tedesco, francese, spagnolo, portoghese, russo, cinese e giapponese, compresi i nuovi strumenti: debugger, repository, esplora database e i messaggi del language server. La lingua si cambia dal menu, senza riavviare.
9. Dalla web app all'app Android: FormCapacitorBuilder
Con Build Capacitor... un progetto Vue + Vite diventa un'app Android nativa grazie a Capacitor, pronta da installare sul telefono o da pubblicare sul Play Store. Lo stesso codice che gira nel browser, senza riscrivere nulla. La finestra si apre già sulla cartella del progetto attivo: si compilano pochi campi e si preme Build.
Cosa si imposta
- Nome dell'app, nome breve, descrizione, versione e codice di versione.
- ID dell'app (es.
it.miaazienda.miaapp), proposto in automatico dal nome breve e controllato nel formato. - Icona: un PNG (consigliato 1024×1024) da cui si generano tutte le icone Android, con anteprima.
- Orientamento: automatico, verticale o orizzontale.
- URL del backend: l'indirizzo del server che l'app userà per le API.
- Tipo di output: APK di debug, APK release o AAB per il Play Store, con keystore, alias e password per la firma.
- Opzioni per lo sviluppo: traffico HTTP non cifrato (per i server di prova) e debug della WebView da Chrome.
La configurazione si salva nel progetto e si ritrova alla volta successiva. Le password invece non vengono mai salvate.
Cosa fa da solo, in 10 passi
- Controlla l'ambiente: Java JDK 17 o superiore (anche quello incluso in Android Studio) e Android SDK, cercati nei posti abituali.
- Installa Capacitor se manca (
@capacitor/core,cli,android), allineando le versioni fra loro. - Genera
capacitor.config.json. Se il progetto ha già uncapacitor.config.tso.js, lo rispetta e non lo tocca. - Aggiorna
package.json(nome, versione, scriptcap:*) senza toccare gli script esistenti. - Adatta il codice web alla WebView: percorsi relativi in
vite.config, Vue Router in modalità hash (così ricarica, link diretti e tasto Indietro funzionano sempre), e l'indirizzo delle API letto daVITE_API_BASE. - Build Vite con un
.env.productionche punta al backend remoto. - Aggiunge la piattaforma Android (solo la prima volta) e sincronizza Capacitor.
- Genera le icone con
@capacitor/assets. - Scrive nel progetto Android nome dell'app, ID, versione e orientamento.
- Compila con Gradle e copia il risultato in
dist-capacitor, con un nome chiaro comemiaapp-1.0.0-release.aab.
Pensato per non fare danni
- I file del progetto web modificati per la build vengono salvati prima e ripristinati alla chiusura: il progetto resta quello di sempre.
- La build si può annullare in qualsiasi momento, e si fermano anche i processi figli (npm, Node, Gradle, Java). Durante la build la finestra non si chiude per sbaglio.
- Se Gradle fallisce, il registro mostra le righe di errore e suggerisce la causa più probabile: licenze dell'SDK da accettare, JDK sbagliato, SDK non trovato. Il log completo finisce in
capacitor-build.log. - Un pulsante apre il progetto in Android Studio (
npx cap open android), per emulatore, debug nativo e plugin.




