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,

  /**
   * 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:
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