Installazione
Prerequisiti
- Node.js >= 22 / npm >= 10
- Vue 3.5+
Peer dependencies obbligatorie
| Pacchetto | Versione |
|---|---|
vue | ^3.5.43 |
@pzeta/vue-components | ^1.32.0 (dalla 2.20.0) |
@pzeta/vue-i18n | ^1.2.0 |
Peer dependencies opzionali
Installale solo se usi i componenti corrispondenti (sono peerDependenciesMeta.optional nel package.json della libreria):
| Pacchetto | Versione | Componenti che la richiedono |
|---|---|---|
@tiptap/vue-3 | ^3.31.3 | TiptapEditor |
@tiptap/starter-kit | ^3.31.3 | TiptapEditor |
@tiptap/pm | ^3.31.3 | TiptapEditor — richiesto da @tiptap/vue-3 con versione esatta |
@tiptap/extension-image | ^3.31.3 | TiptapEditor con extensions: ['image'] (dalla 2.17.0) |
@tiptap/extension-table | ^3.31.3 | TiptapEditor con extensions: ['table'] (dalla 2.17.0) |
@tiptap/suggestion | ^3.31.3 | TiptapEditor con voiceTranscription, per il comando / (dalla 2.17.0) |
@googlemaps/js-api-loader | ^2.1.3 | AddressAutocompleteInput (provider Google) |
@pzeta/postgrest | ^1.2.9 | Componenti Remote con la prop endpoint |
@pzeta/mfe-contracts | ^2.0.0 || ^3.0.0 | Componenti Remote con la prop endpoint (la 3.x dalla 2.18.3) |
TiptapEditor o AddressAutocompleteInput senza la peer optional installata, ricevi un errore chiaro che indica quale pacchetto installare. Le estensioni Tiptap opzionali vengono importate solo quando le chiedi: chi non usa immagini, tabelle o trascrizione vocale non deve installarle.@tiptap/suggestion, con MISSING_EXPORT "Suggestion" is not exported by "__vite-optional-peer-dep:@tiptap/suggestion…", anche se non usi TiptapEditor: il chunk della trascrizione vocale importava staticamente due peer opzionali. Corretto nella 2.18.2: usa quella o successive.@tiptap/* alla stessa versione. Ogni estensione Tiptap vuole @tiptap/core alla sua stessa versione esatta. Aggiornando @pzeta/vue-form alla 2.17 o successive, npm può segnalare ERESOLVE overriding peer dependency (un avviso, l'installazione riesce). Se però @tiptap/extension-image, @tiptap/extension-table o @tiptap/suggestion sono già nel progetto a una versione più vecchia (per esempio perché li porta @nuxt/ui), l'installazione si ferma con ERESOLVE could not resolve: aggiorna insieme tutta la famiglia @tiptap/*.I moduli PostgREST servono solo ai componenti Remote che usano endpoint e sono caricati con import() alla prima richiesta: chi passa una fetchFn non deve installarli. Vedi Sorgente dati endpoint.Configurazione registry npm
@pzeta/vue-form è pubblicato su un registry npm privato. Aggiungi al file .npmrc del progetto:
@pzeta:registry=https://gitea.pzetatouch.it/api/packages/pzeta_touch/npm/
Installazione
npm install @pzeta/vue-form
Import CSS
Importa il foglio di stile della libreria — necessario per i componenti che hanno stili propri (editor, barcode, camera, ecc.):
import '@pzeta/vue-form/style.css'
Setup in main.ts
I due plugin devono essere registrati nell'ordine corretto: I18nFormPlugin prima, VueFormPlugin dopo.
import { createApp } from 'vue'
import { VueFormPlugin, I18nFormPlugin } from '@pzeta/vue-form'
import '@pzeta/vue-form/style.css'
import App from './App.vue'
const app = createApp(App)
// 1. Configura traduzioni (DEVE precedere VueFormPlugin)
app.use(I18nFormPlugin)
// 2. Registra componenti globalmente
app.use(VueFormPlugin)
app.mount('#app')
@pzeta/vue-components non va registrato globalmente per @pzeta/vue-form: dalla 2.8.0 ogni componente della libreria importa esplicitamente i controlli che usa (Dialog, Button, Select, Tabs, Stepper...). Il tema e il CSS di @pzeta/vue-components restano necessari. Fino alla 2.7.0 DynamicFormDialog, i remote e i layout tabs/wizard/accordion risolvevano quei controlli per nome e senza app.use(PzetaComponents) non si montavano.Setup selettivo
Per ridurre il bundle, è possibile registrare solo i componenti necessari e aggiungere un prefisso ai nomi:
import { VueFormPlugin } from '@pzeta/vue-form'
app.use(VueFormPlugin, {
prefix: 'Pz', // <PzDynamicFormLayouts> invece di <DynamicFormLayouts>
components: ['DynamicFormLayouts', 'SelectRemote'] // solo questi due componenti
})
Componenti disponibili:HiddenInput, IconSelect, AiFieldTrigger, ListInput, CronInput, TiptapEditor, VoiceTranscriptionBlock, SelectRemote, AutoCompleteRemote, ListboxRemote, RadioGroupRemoteInput, TreeRemote, InplaceSelectRemote, OrderListRemote, PickListRemote, LookupListboxInput, LookupComboBoxInput, AddressAutocompleteInput, BarcodeScanner, CameraCapture, FormSection, FormSectionRow, DynamicFormLayouts, DynamicFormDrawer, DynamicFormDrawerWithTable, DynamicFormDialog, DynamicFormListDialog
LookupListboxInput è alias di ListboxRemote e LookupComboBoxInput è alias di SelectRemote. Mantenuti solo per retrocompatibilità — preferisci i nomi canonici negli esempi nuovi.AutoCompleteRemote è registrato dal plugin dalla 2.18.4; con le versioni precedenti va importato da @pzeta/vue-form.