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