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.

Simple Preset ​

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):

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

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

Configuring Presets ​

Once a preset it used it can be further customized with regular 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 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:

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