General
General configuration options.
General Configuration Options
The following options are available for configuring various aspects of the Vueform Builder:
// builder.config.js
import { defineConfig } from '@vueform/builder'
export default defineConfig({
/**
* Prefixes localStorage keys.
*/
storagePrefix: null,
/**
* The ms to wait between the last text input and preview rerender.
* Setting this to `false` turns it off (not recommended).
*/
delay: 300,
/**
* The ms to wait between the last change and saving data to local storage
* and triggering the `@save` event.
*/
autosave: 1000,
/**
* Whether it should store history.
*/
history: true,
/**
* The maximum number of history items to store, `-1` for unlimited.
*/
maxHistory: -1,
/**
* Whether conditional field names should be full path or name only.
*/
longFieldNames: false,
/**
* The default name of a new form.
*/
defaultName: 'MyForm',
/**
* Whether multiple elements should be allowed in a row. When set to `false`,
* resizing elements will only resize the element `wrapper` and not the `container`,
* keeping each element in a unique row. When disabled, elements cannot be added
* to the left or right side, and `container` column resizing is hidden.
*/
autoflow: true,
/**
* Transforms the new element's schema. (see below)
*/
transformElement: (elementSchema, builder) => {
return elementSchema
},
/**
* Whether to open the config panel when an element is added.
*/
openOnAdd: false,
/**
* Whether users can create custom elements.
*/
allowCustomElements: false,
/**
* The list of keys the users shouldn't be allowed to use for custom elements.
*/
restrictedCustomElementKeys: [],
/**
* The category where custom elements should be placed.
* If you want a new category called 'Custom 'to be created set this to `false`.
* If your setup does not use categories set this to `false`.
*/
customElementCategory: 'fields',
/**
* The position where new custom element should be placed.
* It can be `prepend` or `append`.
*/
customElementPosition: 'prepend',
/**
* The list of column types that should be available for Matrix element.
*/
columnTypes: [
{
key: 'select', // the key of the column type
label: 'Select', // the label that should be displayed in the dropdown list
inputType: { type: 'select', }, // the `inputType` property of the matrix column
items: true, // whether items can be defined for the type
},
// ...
],
/**
* Whether the custom elements the user create should be
* allowed to be selected as column type for Matrix element.
*/
allowCustomColumnTypes: false,
/**
* The type of custom elements created by the user that should be excluded from
* the available column types when using `allowCustomColumnTypes: true`.
*/
excludeTypesFromColumns: [
'signature', 'matrix', 'date', 'dates', 'captcha',
'hidden', 'static', 'group', 'object', 'list'
],
/**
* The type of custom elements created by the user that should have items
* by default when using `allowCustomColumnTypes: true`.
*/
columnTypesWithItems: [
'select', 'multiselect', 'tags', 'checkboxgroup', 'radiogroup'
],
})
Transform Element
The transformElement(elementSchema, builder)
method allows you to alter the schema of an element before it is added to the form.
- elementSchema: The schema of the element being added, for example:
// Example of `elementSchema`
{
name: 'text',
type: 'text',
label: 'Text',
builder: {
type: 'text'
}
}
- builder: The Builder Object exported from the builder.
Neither elementSchema
nor builder
should be modified directly. The transformElement
method should return the element schema with any updates or transformations applied.
Unique Element Names
For example, to assign a unique name to each new element based on the current timestamp:
// builder.config.js
import { defineConfig } from '@vueform/builder'
export default defineConfig({
transformElement: (elementSchema, builder) => {
return {
...elementSchema,
name: `input_${Date.now()}`
}
}
})
This will ensure that every element added to the form has a unique name.
Alternatively, to assign simple incrementing names (input
, input_1
, input_2
, ...):
// builder.config.js
import { defineConfig } from '@vueform/builder'
export default defineConfig({
transformElement: (elementSchema, builder) => {
return {
...elementSchema,
name: `input` // Will automatically increment: input, input_1, input_2, ...
}
}
})
This configuration ensures each new element receives a unique name as it is added to the form.