Last updated:
Configuration in Vue makes use of props on FormcentricForm.
The technical semantics of the common Formcentric keys are described in the main Formcentric Client (General) documentation.
This page therefore focuses on the Vue syntax and Vue-specific special cases.
The common semantics of height and maxWidth are described in Formcentric Client (General). In Vue, these values can be set directly as props or via containerProps on the wrapper.
Example with props:
Example with normal Vue attributes:
Example with containerProps:
The technical semantics of parentUrl are described in Formcentric Client (General).
In Vue, the same common key is set directly as the prop parentUrl – such as when the form finds itself in a modal, for example.
Example:
The technical semantics of vars and the common behaviour with URL parameters are described in Formcentric Client (General).
In Vue, the common key is set directly as the prop vars.
Example:
The common semantics of language and locale are described in Formcentric Client (General). In Vue, the same keys are set directly as props.
Example:
The common semantics of localesPath and the structure of the translation file are described in Formcentric Client (General). In Vue, the same common key is set directly as the prop localesPath.
Example:
Example for a localisation file:
The common semantics of configuration are described in Formcentric Client (General). In Vue, the same common key is set directly as the prop configuration.
Example:
The common semantics of formName, refs, requestHeaders, persist and other metadata are described in Formcentric Client (General). In Vue, these common keys are set directly as props.
Example:
The FormcentricForm component supports all mount configuration values as top-level props, as well as Vue-specific additional props and events.
remountKey?: string | numbercontainerProps?: Record<string, unknown> Passes attributes to the enclosing <div>, for example class, style, id, role, aria-* or other attributes.<FormcentricForm> Attributes like class, style, id or aria-* are also applied to the enclosing <div>.@ready Is triggered after a successful initialisation.@error Is triggered after initialisation or runtime errors. The event returns an Error object.conflictBehavior?: 'throw' | 'stop-existing'embedId is already active on another/the same DOM instance.stop-existing is active by default.The technical semantics of the common props are described in Formcentric Client (General).
In Vue, these are as follows:
| Prop |
| embedId |
| formDefinition |
| srcUrl |
| dataUrl |
| formappUrl |
| designUrl |
The technical semantics of the common props are described in Formcentric Client (General).
In Vue, these are as follows:
| Prop |
| designUrl |
| themeUrl |
| themeVariableUrl |
| themeVariables |
| templateUrl |
| themeDir |
| theme |
| skipThemeLoad |
| skipTemplatesLoad |
| skipFormLoad |
The technical semantics of the common props are described in Formcentric Client General.
In Vue, these are as follows:
| Prop |
| vars |
| params |
| refs |
| token |
| requestHeaders |
| formName |
| instanceId |
| contentHandler |
| env |
| parentUrl |
| configuration |
The technical semantics of the common props are described in Formcentric Client (General).
In Vue, these are as follows:
| Prop |
| language |
| locale |
| localesPath |
| debug |
| maxWidth |
| height |
embedId or formDefinition must be set.embedId, formDefinition or remountKey trigger a repeat embedding.provideFormcentricConfig(...) values or browser-global defaults also take effect only after a repeat embedding.class, style, id, aria-* or containerProps affect the enclosing <div> and not the running Formcentric instance itself.conflictBehavior is set to stop-existing by default.skipThemeLoad and skipTemplatesLoad take effect only if they are set explicitly.embedId should remain stable.remountKey instead of using a changing Vue key.vars, params, themeVariables, configuration or containerProps should be passed as serialisable objects.data-fc-watch is not relevant for component-based Vue embeddings.
