Installazione

Prerequisiti

• Node.js >= 22 / npm >= 10
• Vue 3.5+

Peer dependencies obbligatorie

Peer dependencies opzionali

Installale solo se usi i componenti corrispondenti (sono peerDependenciesMeta.optional nel package.json della libreria):

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')

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, TiptapEditor, SelectRemote, ListboxRemote, RadioGroupRemoteInput, TreeRemote, InplaceSelectRemote, OrderListRemote, PickListRemote, LookupListboxInput, LookupComboBoxInput, AddressAutocompleteInput, BarcodeScanner, CameraCapture, FormSection, FormSectionRow, DynamicFormLayouts, DynamicFormDrawer, DynamicFormDrawerWithTable, DynamicFormDialog, DynamicFormListDialog

Primo form