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