Customizing Element List
Learn how to customize the list of available elements and categories.
Available Elements
You can change the list of available elements and their order via the elements property in builder.config.js:
// builder.config.js
import { defineConfig } from '@vueform/builder'
export default defineConfig({
elements: [
'text',
'number',
'email',
'phone',
'password',
'url',
'location',
'textarea',
'editor',
'signature',
'checkbox',
'checkboxgroup',
'checkboxBlocks',
'checkboxTabs',
'radio',
'radiogroup',
'radioBlocks',
'radioTabs',
'matrix',
'table',
'toggle',
'select',
'multiselect',
'tags',
'date',
'datetime',
'time',
'dates',
'dateRange',
'slider',
'rangeSlider',
'verticalSlider',
'file',
'multifile',
'image',
'multiImage',
'gallery',
'captcha',
'hidden',
'submit',
'reset',
'primaryButton',
'secondaryButton',
'dangerButton',
'h1',
'h2',
'h3',
'h4',
'p',
'quote',
'img',
'link',
'divider',
'html',
'tabs',
'steps',
'grid',
'gridTable',
'container',
'container2',
'container3',
'container4',
'list',
'nestedList',
]
})Excluding Elements
If you want to exclude certain elements, you can use the excludeElements property:
// builder.config.js
import { defineConfig } from '@vueform/builder'
export default defineConfig({
excludeElements: [
'captcha',
'signature',
// ...
]
})Element Categories
You can customize the element categories in builder.config.js via the categories property:
// builder.config.js
import { defineConfig } from '@vueform/builder'
export default defineConfig({
// Default categories
categories: [
{
label: 'Fields',
key: 'fields',
},
{
label: 'Static',
key: 'static',
},
{
label: 'Structure',
key: 'structure',
},
],
})The key is used in element definition as category.
If you would like to change the category of elements, you have to go through each of them and re-assign their category prop.
The element types are available via the elementTypes export of @vueform/builder and can be modified via the element.types in builder.config.js:
// builder.config.js
import { defineConfig, elementTypes } from '@vueform/builder'
// Log `elementType` to see the available elements
console.log(Object.keys(elementTypes))
export default defineConfig({
categories: [
{
label: 'My category',
key: 'my_category',
},
{
label: 'My other category',
key: 'my_other_category',
},
],
element: {
types: {
text: {
...elementTypes.text,
category: 'my_category',
},
number: {
...elementTypes.number,
category: 'my_category',
},
// ...
container: {
...elementTypes.container,
category: 'my_other_category',
},
// ...and so on
}
}
})Translating Categories
Category labels can also be provided as translation tags that exist in builder locale files:
// builder.config.js
import {
defineConfig,
elementTypes,
en_US,
nl_NL,
} from '@vueform/builder'
en_US.my_category_label = 'My category'
en_US.my_other_category_label = 'My other category'
nl_NL.my_category_label = 'Mijn categorie'
nl_NL.my_other_category_label = 'Mijn andere categorie'
export default defineConfig({
categories: [
{
label: 'my_category_label',
key: 'my_category',
},
{
label: 'my_other_category_label',
key: 'my_other_category',
},
],
builderLocales: {
en_US,
nl_NL,
}
// ...
})Removing Categories
If you would like to remove all categories, you can simply pass an empty array:
// builder.config.js
import { defineConfig } from '@vueform/builder'
export default defineConfig({
categories: [],
})In this case, the category selector will disappear, and all elements will be displayed in a single list regardless of the category defined for them.
Category Search
If you want to disable the category search, you can set search: false in builder.config.js:
// builder.config.js
import { defineConfig } from '@vueform/builder'
export default defineConfig({
search: false,
})
