Layout

Layout configuration options.

The following options are for configuring different aspects of the builder's layout.

js
// builder.config.js

export default {
  search: true,
  views: ['editor', 'preview', 'code'],
  devices: ['tablet', 'desktop'], // set to `false` to hide device selector and disable responsive column resizing
  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
    },
  }, // the breakpoints tied to devices
  darkMode: ['light', 'dark'],
  toggleLeft: true,
  toggleRight: true,
  clear: true,
  save: true,
  undo: true,
  modelPreview: true,
  leftPanel: ['elements', 'tree'],
  rightPanel: ['form', 'theme', 'export', 'settings', 'model'],
  defaultWidth: 432,
}

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 0px to sm - 1px (always equals to 'Tablet breakpoint - 1px')
  • Tablet: from sm to lg - 1px
  • Dekstop: lg and 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.

js
// builder.config.js

export default {
  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:

css
/* 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:

scss
/* 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.

👋 Hire Vueform team for form customizations and developmentLearn more