Layout
Layout configuration options.
Layout Configuration Options
The following options are for configuring different aspects of the builder's layout.
// builder.config.js
import { defineConfig } from '@vueform/builder'
export default defineConfig({
/**
* The default width of the preview area.
*/
defaultWidth: 432,
/**
* Whether name tags should be displayed for elements.
*/
names: true,
/**
* Whether element search should be displayed.
*/
search: true,
/**
* Whether toogle left button should appear.
*/
toggleLeft: true,
/**
* Whether toogle right button should appear.
*/
toggleRight: true,
/**
* Whether trash button should appear.
*/
clear: true,
/**
* Whether save button should appear.
*/
save: true,
/**
* Whether undo/redo buttons should appear.
*/
undo: true,
/**
* Data model should be displayed in preview mode.
*/
modelPreview: true,
/**
* The rendering mode of the left panel.
* Can be 'tabs' or 'icons'
*/
leftLayout: 'tabs',
/**
* The rendering mode of the right panel.
* Can be 'tabs' or 'icons'
*/
rightLayout: 'tabs',
/**
* The panels to place on the left side.
*/
leftPanel: [
'elements', 'tree'
],
/**
* The panels to place on the right side.
*/
rightPanel: [
'form', 'theme', 'export', 'settings', 'model'
],
/**
* The views the builder should have.
*/
views: [
'editor', 'preview', 'code'
],
/**
* Dark mode selectors.
*/
darkMode: [
'light', 'dark'
],
/**
* The devices available for responsive editing.
* Set to `false` to hide device selector and disable responsive column resizing
*/
devices: [
'tablet', 'desktop'
],
/**
* The breakpoints for devices.
*/
breakpoints: {
tablet: {
breakpoint: 'sm',
viewportSize: 640, // used only to inform users about the viewport size related to `tablet` view
},
desktop: {
breakpoint: 'lg',
viewportSize: 1024, // used only to inform users about the viewport size related to `desktop` view
},
},
})Changing Device Breakpoints
Vueform is using a mobile-first breakpoint system when it comes to resizing columns on different devices and viewport sizes. The default breakpoints are based on Tailwind CSS: https://tailwindcss.com/docs/responsive-design
When a device is selected while editing forms (Mobile / Tablet / Desktop) you will be editing the form for that specific device, even though you don't see the preview area resize. This might be counterintuitive, but if you check the exported form in different viewport sizes, you'll see that it's actually working.
The following breakpoints are used by default for the devices:
- Mobile: from
0pxtosm - 1px(always equals to 'Tablet breakpoint - 1px') - Tablet: from
smtolg - 1px - Dekstop:
lgand up
If you want to change these to eg. tablet -> md first you need to update the breakpoints.tablet.breakpoint to md in the config.
// builder.config.js
import { defineConfig } from '@vueform/builder'
export default defineConfig({
breakpoints: {
tablet: {
breakpoint: 'md'
}
}
})Second you need to include the scss version of Vueform Builder's styles and set $vfb-tablet-breakpoint to md as well. Here's an example:
/* Your original CSS import */
@import "@vueform/builder/index.css";Replace it with the following in a file where you can import scss and make sure you have an scss loader:
/* Using SCSS import instead of CSS with a custom variable */
$vfb-tablet-breakpoint: 'md';
@import "@vueform/builder/scss/index.scss";If you also want to change the breakpoint related to desktop, you can use $vfb-desktop-breakpoint variable.
