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,
})
