Last updated:
Configuration in Vue makes use of props on FormcentricForm.
The technical semantics of the common Formcentric keys are described in the main 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 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 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 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 Client (General). In Vue, the same keys are set directly as props.
Example:
The common semantics of localesPath, locales, and the locale module formats are documented in Client (General)under Configuration → Including your own translations.
Two options are available in Vue:
localesPath (written as locales-path in templates) for a JavaScript module containing translations that is loaded at runtime.locales for a directly passed JavaScript object containing translation overrides as well as date-fns and upload locale objects by reference.Example using localesPath:
Example using locales:
Import the locale objects from the respective packages. The following snippet illustrates the structure; add the required Formcentric translations under resources. The object is passed to the component via :locales="locales".
Example of a localesPath localization file:
The common semantics of configuration are described in 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 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 Client (General).
In Vue, these are as follows:
| Prop |
| embedId |
| formDefinition |
| srcUrl |
| dataUrl |
| designUrl |
The technical semantics of the common props are described in 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 Client (General).
In Vue, these are as follows:
| Prop |
| vars |
| params |
| refs |
| token |
| requestHeaders |
| formName |
| instanceId |
| env |
| parentUrl |
| configuration |
The technical semantics of the common props are described in Client (General).
In Vue, these are as follows:
| Prop |
| language |
| locale |
| localesPath |
| locales |
| 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 serializable objects. locales is the exception: it contains date-fns and upload locale objects, including their functions, and is passed by reference.data-fc-watch is not relevant for component-based Vue embeddings.
