Presets ​

An easy way to use default builder 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.

Simple Preset ​

Here's an example of using the simple preset, which results in a more simplified version of Vueform Builder (aka Simple version):

// 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 that use the same configuration methods described throughout this documentation. You can check out the Simple preset's source code to see how it is made.

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

Available Presets ​

Here is the list of currently available presets:

• Developer (default, requires no preset) - preview
• Simple (@vueform/builder/presets/simple) - preview

Configuring Presets ​

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

// 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 in this way will be merged with preset options. For example, this configuration would make the simple version of the builder one-sided.

Custom Presets ​

You can create custom presets using a configuration object, for example:

// 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 create a one-sided builder, adding all panels to the left side and displaying them with icons.