Customizing Export Panel
Learn how to customize the Export panel.
Disabling Config Fields
The following options can be used to disable export config fields:
js
// builder.config.js
import { defineConfig } from '@vueform/builder'
export default defineConfig({
export: {
props: {
export: {
output: true,
api: true,
theme: true,
download: true,
},
}
}
})Adding New Export Fields
The sections and separators export of @vueform/builder have an export property that—just like in the case of different element types—contains the config panel sections and separators of the Export panel:
js
// builder.config.js
import { defineConfig, sections, separators } from '@vueform/builder'
// Nothing will change in this case
export default defineConfig({
export: {
sections: sections.export,
separators: separators.export,
}
})The sections are structured the same way as for element types. The same is true for separators.
Here's an example of how you can add an installation instructions field at the end of the Export panel:
js
// builder.config.js
import { defineConfig, sections, separators, BaseExportField } from '@vueform/builder'
// Creating the Instructions field
const ExportInstructionsField = class extends BaseExportField {
name = 'ExportInstructionsField'
get schema() {
return {
uniqueId: {
type: 'static',
label: 'How to install?',
content: 'Lorem ipusm dolor sit amet...'
}
}
}
}
// Adding the Instructions field
sections.export.export.fields.instructions = {
type: ExportInstructionsField,
}
// Creating a separator between our new and existing fields
separators.export.export = [
...separators.export.export,
['instructions'],
]
export default defineConfig({
export: {
sections: sections.export,
separators: separators.export,
}
})Export fields need to be extended from the BaseExportField export of @vueform/builder and they usually start with the Export field name prefix.
Retriving Field Value
The field's value gets added to the export property of the Builder Object.
