lunedì 26 ottobre 2026

Free VueLityx© Il builder visuale per Vue.js, Vite e Nuxt prossimo al rilascio

Free VueLityx© Il builder visuale per Vue.js, Vite e Nuxt 

POSTED BY GIULIANO PAGNINI, 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.

In breve
  • 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 ref mostrati 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.vue si 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 <Hello l'editor propone le props del componente figlio.
  • Import automatici: scegli computed dall'elenco e l'import da vue si 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.vue e cambia anche in utils.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-action sul 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

  1. Controlla l'ambiente: Java JDK 17 o superiore (anche quello incluso in Android Studio) e Android SDK, cercati nei posti abituali.
  2. Installa Capacitor se manca (@capacitor/core, cli, android), allineando le versioni fra loro.
  3. Genera capacitor.config.json. Se il progetto ha già un capacitor.config.ts o .js, lo rispetta e non lo tocca.
  4. Aggiorna package.json (nome, versione, script cap:*) senza toccare gli script esistenti.
  5. 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 da VITE_API_BASE.
  6. Build Vite con un .env.production che punta al backend remoto.
  7. Aggiunge la piattaforma Android (solo la prima volta) e sincronizza Capacitor.
  8. Genera le icone con @capacitor/assets.
  9. Scrive nel progetto Android nome dell'app, ID, versione e orientamento.
  10. Compila con Gradle e copia il risultato in dist-capacitor, con un nome chiaro come miaapp-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.
#Delphi #VueJS #CPPBuilder #LowCode #WebDevelopment #VueLityX
Pubblicato da alle

Nessun commento:

Posta un commento

Iscriviti a: Commenti sul post (Atom)