General
General configuration options.
General Configuration Options
The following options are available for configuring different aspects of the builder:
// builder.config.js
import { defineConfig } from '@vueform/builder'
export default defineConfig({
/**
* Prefixes localStorage keys.
*/
storagePrefix: null,
/**
* The ms to wait between last text input and preview rerender, `false` turns it off (not recommended).
*/
delay: 300,
/**
* The ms to wait between last change and saving data to local storage & triggering `@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',
/**
* Transforms the new element's schema. (see below)
*/
transformElement: (elementSchema, builder) => {
return elementSchema
}
})Transform Element
The transformElement(elementSchema, builder) method can alter the schema of the element that is being added to our form.
The elementSchema is the schema of the element that will be added to the form, eg:
// Example for `elementSchema`
{
name: 'text',
type: 'text',
label: 'Text',
builder: {
type: 'text'
}
}The builder is the Builder Object that gets exported from the builder.
It's important the neither elementSchema or builder should be modified.
The transformElement method should return the element schema with any updates we may want to apply.
Unique Element Names
For example, if we want to override the name of the element, we can do so like this:
// builder.config.js
import { defineConfig } from '@vueform/builder'
export default defineConfig({
transformElement: (elementSchema, builder) => {
return {
...elementSchema,
name: `input_${Date.now()}`
}
}
})This will override the name of all elements to have a unique ID based on the current timestamp.
We can also return only a simple name like input as it will be automatically incremented when added to the form:
// builder.config.js
import { defineConfig } from '@vueform/builder'
export default defineConfig({
transformElement: (elementSchema, builder) => {
return {
...elementSchema,
name: `input` // will be: input, input_1, input_2, ...
}
}
})
