General

General configuration options.

General Configuration Options

The following options are available for configuring various aspects of the Vueform Builder:

js
// 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:
js
// Example of `elementSchema`
{
  name: 'text',
  type: 'text',
  label: 'Text',
  builder: {
    type: 'text'
  }
}

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:

js
// 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, ...):

js
// 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.

👋 Hire Vueform team for form customizations and developmentLearn more