Layout

Layout configuration options.

Layout Configuration Options

The following options allow you to configure various aspects of the Vueform 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 the toggle left button should appear.
   */
  toggleLeft: true,

  /**
   * Whether the toggle right button should appear.
   */
  toggleRight: true,

  /**
   * Whether the trash button should appear.
   */
  clear: true,

  /**
   * Whether the save button should appear.
   */
  save: true,

  /**
   * Whether undo/redo buttons should appear.
   */
  undo: true,

  /**
   * Whether the 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 the device selector and disable responsive column resizing.
   */
  devices: [
    'tablet', 'desktop'
  ],

  /**
   * The breakpoints for devices.
   */
  breakpoints: {
    tablet: {
      breakpoint: 'sm',
      viewportSize: 640, // used to inform users about the viewport size for `tablet` view
    },
    desktop: {
      breakpoint: 'lg',
      viewportSize: 1024, // used to inform users about the viewport size for `desktop` view
    },
  },

  /**
   * Whether the form builder object import/export tool should be visible.
   */
  import: false,
})

Changing Device Breakpoints

Vueform uses a mobile-first breakpoint system for resizing columns on different devices and viewport sizes. The default breakpoints are based on Tailwind CSS.

When you select a device while editing forms (Mobile / Tablet / Desktop), you are editing the form for that specific device, even though the preview area may not resize. This might seem counterintuitive, but when you check the exported form in different viewport sizes, it works as expected.

The default breakpoints are:

Mobile: from 0px to sm - 1px (equals Tablet breakpoint - 1px)
Tablet: from sm to lg - 1px
Desktop: lg and up

To change the breakpoints, for example, setting tablet to md, first update breakpoints.tablet.breakpoint to md in the configuration:

// builder.config.js

import { defineConfig } from '@vueform/builder'

export default defineConfig({
  breakpoints: {
    tablet: {
      breakpoint: 'md'
    }
  }
})

Then, include the scss version of Vueform Builder's styles and set the $vfb-tablet-breakpoint variable to md. Here’s an example:

css

/* Your original CSS import */

@import "@vueform/builder/index.css";

Replace it with the following SCSS import in a file where you can import scss, ensuring 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 the $vfb-desktop-breakpoint variable.

Layout ​

Layout Configuration Options ​

Changing Device Breakpoints ​

Layout

Layout Configuration Options

Changing Device Breakpoints