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,
})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.
