Presets

Load default configurations.

Presets

When Vueform Builder is loaded without a preset, it will include all elements, features and configuration options (aka Developer version).

Using presets is a great way to override this configuration with preconfigured options which can be further customized.

Here's an example of using the simple preset, which will result in having a much more simply configured version of Vueform Builder (aka Simple version):

js
// builder.config.js

import { defineConfig } from '@vueform/builder'

import simple from '@vueform/builder/presets/simple'

export default defineConfig({
  preset: simple,
})

Presets are "pre-set" configuration objects using the same configuration methods described through this whole builder docs. You can check out eg. Simple preset's source code to see how it is made.

When using presets, you need to load the builder.config.js file on client-only if you are using SSR.

Available Presets

Here's the list of currently available presets:

Configuring Presets

Once a preset it used it can be further customized with regular options:

js
// builder.config.js

import { defineConfig } from '@vueform/builder'

import simple from '@vueform/builder/presets/simple'

export default defineConfig({
  preset: simple,
  leftPanel: ['elements', 'tree', 'settings'],
  rightPanel: [],
  // ... other options
})

Options defined like this will be merged with preset options. For example this would make the simple version of the builder one sided only.

Custom Presets

Custom presets can be created with a configuration object, eg:

js
// builder.config.js

import { defineConfig } from '@vueform/builder'

const myPreset = {
  leftPanel: ['elements', 'tree', 'form', 'theme', 'export', 'settings', 'model'],
  rightPanel: [],
  leftLayout: 'icons',
}

export default defineConfig({
  preset: myPreset,
})

This would make the builder one-sided, adding all panels to the left side and display them with icons.

👋 Hire Vueform team for form customizations and developmentLearn more