Demo
Case Studies
Pricing
Support
Docs
Resources
Ecosystem
Appearance
Star
Sign in
Menu
On this page

Rendering ​

Rendering forms exported by Vueform Builder.

Builder Object ​

The Builder exports the following object:

js
let builderObject = {
  form: {
    // form options (including steps, if any)
  },
  schema: {
    // elements
  },
  theme: {
    // theme variables
  },
  export: {
    // builder export settings
  },
  builder: {
    // builder settings
  }
}

This is the object we can store in eg. database to later render.

form ​

The form contains options for <Vueform> component like steps, tabs or endpoint and they can all be passed to <Vueform> component with v-bind:

vue
<template>
  <Vueform v-bind="builderObject.form" />
</template>

schema ​

The schema contains the form elements, and it can be passed directly to <Vueform> component to render the form (schema object method):

vue
<template>
  <Vueform ... :schema="builderObject.schema" />
</template>

theme ​

The theme contains values for CSS variables for Vueform's theming system and can be applied to the rendered form:

vue
<template>
  <Vueform ... class="themed-form" />
</template>

<script setup>
import { computed } from 'vue'
import { camelCase } from 'lodash'

const cssVars = computed(() => {
  const theme = builderObject.theme
  const cssVars = {}

  Object.keys(theme).forEach((key) => {
    let value = theme[key]

    if (typeof value == 'string' && value.match(/^var\(/)) {
      value = theme[value.match(/^var\(--vf-([^\)]*)\)$/)[1]]
    }

    cssVars[camelCase(key)] = value
  })

  return cssVars
})
</script>

<style lang="scss">
.themed-form {
  *, &:before, &:after, &:root {
    --vf-primary: v-bind('cssVars.primary');
    --vf-primary-darker: v-bind('cssVars.primaryDarker');
    --vf-color-on-primary: v-bind('cssVars.colorOnPrimary');
    --vf-danger: v-bind('cssVars.danger');
    --vf-danger-lighter: v-bind('cssVars.dangerLighter');
    --vf-success: v-bind('cssVars.success');
    --vf-success-lighter: v-bind('cssVars.successLighter');
    --vf-gray-50: v-bind('cssVars.gray50');
    --vf-gray-100: v-bind('cssVars.gray100');
    --vf-gray-200: v-bind('cssVars.gray200');
    --vf-gray-300: v-bind('cssVars.gray300');
    --vf-gray-400: v-bind('cssVars.gray400');
    --vf-gray-500: v-bind('cssVars.gray500');
    --vf-gray-600: v-bind('cssVars.gray600');
    --vf-gray-700: v-bind('cssVars.gray700');
    --vf-gray-800: v-bind('cssVars.gray800');
    --vf-gray-900: v-bind('cssVars.gray900');
    --vf-ring-width: v-bind('cssVars.ringWidth');
    --vf-ring-color: v-bind('cssVars.ringColor');
    --vf-link-color: v-bind('cssVars.linkColor');
    --vf-link-decoration: v-bind('cssVars.linkDecoration');
    --vf-font-size: v-bind('cssVars.fontSize');
    --vf-font-size-sm: v-bind('cssVars.fontSizeSm');
    --vf-font-size-lg: v-bind('cssVars.fontSizeLg');
    --vf-font-size-small: v-bind('cssVars.fontSizeSmall');
    --vf-font-size-small-sm: v-bind('cssVars.fontSizeSmallSm');
    --vf-font-size-small-lg: v-bind('cssVars.fontSizeSmallLg');
    --vf-font-size-h1: v-bind('cssVars.fontSizeH1');
    --vf-font-size-h1-sm: v-bind('cssVars.fontSizeH1Sm');
    --vf-font-size-h1-lg: v-bind('cssVars.fontSizeH1Lg');
    --vf-font-size-h2: v-bind('cssVars.fontSizeH2');
    --vf-font-size-h2-sm: v-bind('cssVars.fontSizeH2Sm');
    --vf-font-size-h2-lg: v-bind('cssVars.fontSizeH2Lg');
    --vf-font-size-h3: v-bind('cssVars.fontSizeH3');
    --vf-font-size-h3-sm: v-bind('cssVars.fontSizeH3Sm');
    --vf-font-size-h3-lg: v-bind('cssVars.fontSizeH3Lg');
    --vf-font-size-h4: v-bind('cssVars.fontSizeH4');
    --vf-font-size-h4-sm: v-bind('cssVars.fontSizeH4Sm');
    --vf-font-size-h4-lg: v-bind('cssVars.fontSizeH4Lg');
    --vf-font-size-h1-mobile: v-bind('cssVars.fontSizeH1Mobile');
    --vf-font-size-h1-mobile-sm: v-bind('cssVars.fontSizeH1MobileSm');
    --vf-font-size-h1-mobile-lg: v-bind('cssVars.fontSizeH1MobileLg');
    --vf-font-size-h2-mobile: v-bind('cssVars.fontSizeH2Mobile');
    --vf-font-size-h2-mobile-sm: v-bind('cssVars.fontSizeH2MobileSm');
    --vf-font-size-h2-mobile-lg: v-bind('cssVars.fontSizeH2MobileLg');
    --vf-font-size-h3-mobile: v-bind('cssVars.fontSizeH3Mobile');
    --vf-font-size-h3-mobile-sm: v-bind('cssVars.fontSizeH3MobileSm');
    --vf-font-size-h3-mobile-lg: v-bind('cssVars.fontSizeH3MobileLg');
    --vf-font-size-h4-mobile: v-bind('cssVars.fontSizeH4Mobile');
    --vf-font-size-h4-mobile-sm: v-bind('cssVars.fontSizeH4MobileSm');
    --vf-font-size-h4-mobile-lg: v-bind('cssVars.fontSizeH4MobileLg');
    --vf-font-size-blockquote: v-bind('cssVars.fontSizeBlockquote');
    --vf-font-size-blockquote-sm: v-bind('cssVars.fontSizeBlockquoteSm');
    --vf-font-size-blockquote-lg: v-bind('cssVars.fontSizeBlockquoteLg');
    --vf-line-height: v-bind('cssVars.lineHeight');
    --vf-line-height-sm: v-bind('cssVars.lineHeightSm');
    --vf-line-height-lg: v-bind('cssVars.lineHeightLg');
    --vf-line-height-small: v-bind('cssVars.lineHeightSmall');
    --vf-line-height-small-sm: v-bind('cssVars.lineHeightSmallSm');
    --vf-line-height-small-lg: v-bind('cssVars.lineHeightSmallLg');
    --vf-line-height-headings: v-bind('cssVars.lineHeightHeadings');
    --vf-line-height-headings-sm: v-bind('cssVars.lineHeightHeadingsSm');
    --vf-line-height-headings-lg: v-bind('cssVars.lineHeightHeadingsLg');
    --vf-line-height-blockquote: v-bind('cssVars.lineHeightBlockquote');
    --vf-line-height-blockquote-sm: v-bind('cssVars.lineHeightBlockquoteSm');
    --vf-line-height-blockquote-lg: v-bind('cssVars.lineHeightBlockquoteLg');
    --vf-letter-spacing: v-bind('cssVars.letterSpacing');
    --vf-letter-spacing-sm: v-bind('cssVars.letterSpacingSm');
    --vf-letter-spacing-lg: v-bind('cssVars.letterSpacingLg');
    --vf-letter-spacing-small: v-bind('cssVars.letterSpacingSmall');
    --vf-letter-spacing-small-sm: v-bind('cssVars.letterSpacingSmallSm');
    --vf-letter-spacing-small-lg: v-bind('cssVars.letterSpacingSmallLg');
    --vf-letter-spacing-headings: v-bind('cssVars.letterSpacingHeadings');
    --vf-letter-spacing-headings-sm: v-bind('cssVars.letterSpacingHeadingsSm');
    --vf-letter-spacing-headings-lg: v-bind('cssVars.letterSpacingHeadingsLg');
    --vf-letter-spacing-blockquote: v-bind('cssVars.letterSpacingBlockquote');
    --vf-letter-spacing-blockquote-sm: v-bind('cssVars.letterSpacingBlockquoteSm');
    --vf-letter-spacing-blockquote-lg: v-bind('cssVars.letterSpacingBlockquoteLg');
    --vf-gutter: v-bind('cssVars.gutter');
    --vf-gutter-sm: v-bind('cssVars.gutterSm');
    --vf-gutter-lg: v-bind('cssVars.gutterLg');
    --vf-min-height-input: v-bind('cssVars.minHeightInput');
    --vf-min-height-input-sm: v-bind('cssVars.minHeightInputSm');
    --vf-min-height-input-lg: v-bind('cssVars.minHeightInputLg');
    --vf-py-input: v-bind('cssVars.pyInput');
    --vf-py-input-sm: v-bind('cssVars.pyInputSm');
    --vf-py-input-lg: v-bind('cssVars.pyInputLg');
    --vf-px-input: v-bind('cssVars.pxInput');
    --vf-px-input-sm: v-bind('cssVars.pxInputSm');
    --vf-px-input-lg: v-bind('cssVars.pxInputLg');
    --vf-py-btn: v-bind('cssVars.pyBtn');
    --vf-py-btn-sm: v-bind('cssVars.pyBtnSm');
    --vf-py-btn-lg: v-bind('cssVars.pyBtnLg');
    --vf-px-btn: v-bind('cssVars.pxBtn');
    --vf-px-btn-sm: v-bind('cssVars.pxBtnSm');
    --vf-px-btn-lg: v-bind('cssVars.pxBtnLg');
    --vf-py-btn-small: v-bind('cssVars.pyBtnSmall');
    --vf-py-btn-small-sm: v-bind('cssVars.pyBtnSmallSm');
    --vf-py-btn-small-lg: v-bind('cssVars.pyBtnSmallLg');
    --vf-px-btn-small: v-bind('cssVars.pxBtnSmall');
    --vf-px-btn-small-sm: v-bind('cssVars.pxBtnSmallSm');
    --vf-px-btn-small-lg: v-bind('cssVars.pxBtnSmallLg');
    --vf-py-group-tabs: v-bind('cssVars.pyGroupTabs');
    --vf-py-group-tabs-sm: v-bind('cssVars.pyGroupTabsSm');
    --vf-py-group-tabs-lg: v-bind('cssVars.pyGroupTabsLg');
    --vf-px-group-tabs: v-bind('cssVars.pxGroupTabs');
    --vf-px-group-tabs-sm: v-bind('cssVars.pxGroupTabsSm');
    --vf-px-group-tabs-lg: v-bind('cssVars.pxGroupTabsLg');
    --vf-py-group-blocks: v-bind('cssVars.pyGroupBlocks');
    --vf-py-group-blocks-sm: v-bind('cssVars.pyGroupBlocksSm');
    --vf-py-group-blocks-lg: v-bind('cssVars.pyGroupBlocksLg');
    --vf-px-group-blocks: v-bind('cssVars.pxGroupBlocks');
    --vf-px-group-blocks-sm: v-bind('cssVars.pxGroupBlocksSm');
    --vf-px-group-blocks-lg: v-bind('cssVars.pxGroupBlocksLg');
    --vf-py-tag: v-bind('cssVars.pyTag');
    --vf-py-tag-sm: v-bind('cssVars.pyTagSm');
    --vf-py-tag-lg: v-bind('cssVars.pyTagLg');
    --vf-px-tag: v-bind('cssVars.pxTag');
    --vf-px-tag-sm: v-bind('cssVars.pxTagSm');
    --vf-px-tag-lg: v-bind('cssVars.pxTagLg');
    --vf-py-slider-tooltip: v-bind('cssVars.pySliderTooltip');
    --vf-py-slider-tooltip-sm: v-bind('cssVars.pySliderTooltipSm');
    --vf-py-slider-tooltip-lg: v-bind('cssVars.pySliderTooltipLg');
    --vf-px-slider-tooltip: v-bind('cssVars.pxSliderTooltip');
    --vf-px-slider-tooltip-sm: v-bind('cssVars.pxSliderTooltipSm');
    --vf-px-slider-tooltip-lg: v-bind('cssVars.pxSliderTooltipLg');
    --vf-py-blockquote: v-bind('cssVars.pyBlockquote');
    --vf-py-blockquote-sm: v-bind('cssVars.pyBlockquoteSm');
    --vf-py-blockquote-lg: v-bind('cssVars.pyBlockquoteLg');
    --vf-px-blockquote: v-bind('cssVars.pxBlockquote');
    --vf-px-blockquote-sm: v-bind('cssVars.pxBlockquoteSm');
    --vf-px-blockquote-lg: v-bind('cssVars.pxBlockquoteLg');
    --vf-py-hr: v-bind('cssVars.pyHr');
    --vf-space-addon: v-bind('cssVars.spaceAddon');
    --vf-space-addon-sm: v-bind('cssVars.spaceAddonSm');
    --vf-space-addon-lg: v-bind('cssVars.spaceAddonLg');
    --vf-space-checkbox: v-bind('cssVars.spaceCheckbox');
    --vf-space-checkbox-sm: v-bind('cssVars.spaceCheckboxSm');
    --vf-space-checkbox-lg: v-bind('cssVars.spaceCheckboxLg');
    --vf-space-tags: v-bind('cssVars.spaceTags');
    --vf-space-tags-sm: v-bind('cssVars.spaceTagsSm');
    --vf-space-tags-lg: v-bind('cssVars.spaceTagsLg');
    --vf-space-static-tag-1: v-bind('cssVars.spaceStaticTag1');
    --vf-space-static-tag-2: v-bind('cssVars.spaceStaticTag2');
    --vf-space-static-tag-3: v-bind('cssVars.spaceStaticTag3');
    --vf-floating-top: v-bind('cssVars.floatingTop');
    --vf-floating-top-sm: v-bind('cssVars.floatingTopSm');
    --vf-floating-top-lg: v-bind('cssVars.floatingTopLg');
    --vf-bg-input: v-bind('cssVars.bgInput');
    --vf-bg-input-hover: v-bind('cssVars.bgInputHover');
    --vf-bg-input-focus: v-bind('cssVars.bgInputFocus');
    --vf-bg-input-danger: v-bind('cssVars.bgInputDanger');
    --vf-bg-input-success: v-bind('cssVars.bgInputSuccess');
    --vf-bg-disabled: v-bind('cssVars.bgDisabled');
    --vf-bg-selected: v-bind('cssVars.bgSelected');
    --vf-bg-passive: v-bind('cssVars.bgPassive');
    --vf-bg-icon: v-bind('cssVars.bgIcon');
    --vf-bg-danger: v-bind('cssVars.bgDanger');
    --vf-bg-success: v-bind('cssVars.bgSuccess');
    --vf-bg-tag: v-bind('cssVars.bgTag');
    --vf-bg-slider-handle: v-bind('cssVars.bgSliderHandle');
    --vf-bg-toggle-handle: v-bind('cssVars.bgToggleHandle');
    --vf-bg-date-head: v-bind('cssVars.bgDateHead');
    --vf-bg-addon: v-bind('cssVars.bgAddon');
    --vf-bg-btn: v-bind('cssVars.bgBtn');
    --vf-bg-btn-danger: v-bind('cssVars.bgBtnDanger');
    --vf-bg-btn-secondary: v-bind('cssVars.bgBtnSecondary');
    --vf-color-input: v-bind('cssVars.colorInput');
    --vf-color-input-hover: v-bind('cssVars.colorInputHover');
    --vf-color-input-focus: v-bind('cssVars.colorInputFocus');
    --vf-color-input-danger: v-bind('cssVars.colorInputDanger');
    --vf-color-input-success: v-bind('cssVars.colorInputSuccess');
    --vf-color-disabled: v-bind('cssVars.colorDisabled');
    --vf-color-placeholder: v-bind('cssVars.colorPlaceholder');
    --vf-color-passive: v-bind('cssVars.colorPassive');
    --vf-color-muted: v-bind('cssVars.colorMuted');
    --vf-color-floating: v-bind('cssVars.colorFloating');
    --vf-color-floating-focus: v-bind('cssVars.colorFloatingFocus');
    --vf-color-floating-success: v-bind('cssVars.colorFloatingSuccess');
    --vf-color-floating-danger: v-bind('cssVars.colorFloatingDanger');
    --vf-color-danger: v-bind('cssVars.colorDanger');
    --vf-color-success: v-bind('cssVars.colorSuccess');
    --vf-color-tag: v-bind('cssVars.colorTag');
    --vf-color-addon: v-bind('cssVars.colorAddon');
    --vf-color-date-head: v-bind('cssVars.colorDateHead');
    --vf-color-btn: v-bind('cssVars.colorBtn');
    --vf-color-btn-danger: v-bind('cssVars.colorBtnDanger');
    --vf-color-btn-secondary: v-bind('cssVars.colorBtnSecondary');
    --vf-border-color-input: v-bind('cssVars.borderColorInput');
    --vf-border-color-input-hover: v-bind('cssVars.borderColorInputHover');
    --vf-border-color-input-focus: v-bind('cssVars.borderColorInputFocus');
    --vf-border-color-input-danger: v-bind('cssVars.borderColorInputDanger');
    --vf-border-color-input-success: v-bind('cssVars.borderColorInputSuccess');
    --vf-border-color-checked: v-bind('cssVars.borderColorChecked');
    --vf-border-color-passive: v-bind('cssVars.borderColorPassive');
    --vf-border-color-slider-tooltip: v-bind('cssVars.borderColorSliderTooltip');
    --vf-border-color-tag: v-bind('cssVars.borderColorTag');
    --vf-border-color-btn: v-bind('cssVars.borderColorBtn');
    --vf-border-color-btn-danger: v-bind('cssVars.borderColorBtnDanger');
    --vf-border-color-btn-secondary: v-bind('cssVars.borderColorBtnSecondary');
    --vf-border-color-blockquote: v-bind('cssVars.borderColorBlockquote');
    --vf-border-color-hr: v-bind('cssVars.borderColorHr');
    --vf-border-width-input-t: v-bind('cssVars.borderWidthInputT');
    --vf-border-width-input-r: v-bind('cssVars.borderWidthInputR');
    --vf-border-width-input-b: v-bind('cssVars.borderWidthInputB');
    --vf-border-width-input-l: v-bind('cssVars.borderWidthInputL');
    --vf-border-width-radio-t: v-bind('cssVars.borderWidthRadioT');
    --vf-border-width-radio-r: v-bind('cssVars.borderWidthRadioR');
    --vf-border-width-radio-b: v-bind('cssVars.borderWidthRadioB');
    --vf-border-width-radio-l: v-bind('cssVars.borderWidthRadioL');
    --vf-border-width-checkbox-t: v-bind('cssVars.borderWidthCheckboxT');
    --vf-border-width-checkbox-r: v-bind('cssVars.borderWidthCheckboxR');
    --vf-border-width-checkbox-b: v-bind('cssVars.borderWidthCheckboxB');
    --vf-border-width-checkbox-l: v-bind('cssVars.borderWidthCheckboxL');
    --vf-border-width-dropdown: v-bind('cssVars.borderWidthDropdown');
    --vf-border-width-btn: v-bind('cssVars.borderWidthBtn');
    --vf-border-width-toggle: v-bind('cssVars.borderWidthToggle');
    --vf-border-width-tag: v-bind('cssVars.borderWidthTag');
    --vf-border-width-blockquote: v-bind('cssVars.borderWidthBlockquote');
    --vf-shadow-input: v-bind('cssVars.shadowInput');
    --vf-shadow-input-hover: v-bind('cssVars.shadowInputHover');
    --vf-shadow-input-focus: v-bind('cssVars.shadowInputFocus');
    --vf-shadow-handles: v-bind('cssVars.shadowHandles');
    --vf-shadow-handles-hover: v-bind('cssVars.shadowHandlesHover');
    --vf-shadow-handles-focus: v-bind('cssVars.shadowHandlesFocus');
    --vf-shadow-btn: v-bind('cssVars.shadowBtn');
    --vf-shadow-dropdown: v-bind('cssVars.shadowDropdown');
    --vf-radius-input: v-bind('cssVars.radiusInput');
    --vf-radius-input-sm: v-bind('cssVars.radiusInputSm');
    --vf-radius-input-lg: v-bind('cssVars.radiusInputLg');
    --vf-radius-btn: v-bind('cssVars.radiusBtn');
    --vf-radius-btn-sm: v-bind('cssVars.radiusBtnSm');
    --vf-radius-btn-lg: v-bind('cssVars.radiusBtnLg');
    --vf-radius-small: v-bind('cssVars.radiusSmall');
    --vf-radius-small-sm: v-bind('cssVars.radiusSmallSm');
    --vf-radius-small-lg: v-bind('cssVars.radiusSmallLg');
    --vf-radius-large: v-bind('cssVars.radiusLarge');
    --vf-radius-large-sm: v-bind('cssVars.radiusLargeSm');
    --vf-radius-large-lg: v-bind('cssVars.radiusLargeLg');
    --vf-radius-tag: v-bind('cssVars.radiusTag');
    --vf-radius-tag-sm: v-bind('cssVars.radiusTagSm');
    --vf-radius-tag-lg: v-bind('cssVars.radiusTagLg');
    --vf-radius-checkbox: v-bind('cssVars.radiusCheckbox');
    --vf-radius-checkbox-sm: v-bind('cssVars.radiusCheckboxSm');
    --vf-radius-checkbox-lg: v-bind('cssVars.radiusCheckboxLg');
    --vf-radius-slider: v-bind('cssVars.radiusSlider');
    --vf-radius-slider-sm: v-bind('cssVars.radiusSliderSm');
    --vf-radius-slider-lg: v-bind('cssVars.radiusSliderLg');
    --vf-radius-image: v-bind('cssVars.radiusImage');
    --vf-radius-image-sm: v-bind('cssVars.radiusImageSm');
    --vf-radius-image-lg: v-bind('cssVars.radiusImageLg');
    --vf-radius-gallery: v-bind('cssVars.radiusGallery');
    --vf-radius-gallery-sm: v-bind('cssVars.radiusGallerySm');
    --vf-radius-gallery-lg: v-bind('cssVars.radiusGalleryLg');
    --vf-checkbox-size: v-bind('cssVars.checkboxSize');
    --vf-checkbox-size-sm: v-bind('cssVars.checkboxSizeSm');
    --vf-checkbox-size-lg: v-bind('cssVars.checkboxSizeLg');
    --vf-gallery-size: v-bind('cssVars.gallerySize');
    --vf-gallery-size-sm: v-bind('cssVars.gallerySizeSm');
    --vf-gallery-size-lg: v-bind('cssVars.gallerySizeLg');
    --vf-toggle-width: v-bind('cssVars.toggleWidth');
    --vf-toggle-width-sm: v-bind('cssVars.toggleWidthSm');
    --vf-toggle-width-lg: v-bind('cssVars.toggleWidthLg');
    --vf-toggle-height: v-bind('cssVars.toggleHeight');
    --vf-toggle-height-sm: v-bind('cssVars.toggleHeightSm');
    --vf-toggle-height-lg: v-bind('cssVars.toggleHeightLg');
    --vf-slider-height: v-bind('cssVars.sliderHeight');
    --vf-slider-height-sm: v-bind('cssVars.sliderHeightSm');
    --vf-slider-height-lg: v-bind('cssVars.sliderHeightLg');
    --vf-slider-height-vertical: v-bind('cssVars.sliderHeightVertical');
    --vf-slider-height-vertical-sm: v-bind('cssVars.sliderHeightVerticalSm');
    --vf-slider-height-vertical-lg: v-bind('cssVars.sliderHeightVerticalLg');
    --vf-slider-handle-size: v-bind('cssVars.sliderHandleSize');
    --vf-slider-handle-size-sm: v-bind('cssVars.sliderHandleSizeSm');
    --vf-slider-handle-size-lg: v-bind('cssVars.sliderHandleSizeLg');
    --vf-slider-tooltip-distance: v-bind('cssVars.sliderTooltipDistance');
    --vf-slider-tooltip-distance-sm: v-bind('cssVars.sliderTooltipDistanceSm');
    --vf-slider-tooltip-distance-lg: v-bind('cssVars.sliderTooltipDistanceLg');
    --vf-slider-tooltip-arrow-size: v-bind('cssVars.sliderTooltipArrowSize');
    --vf-slider-tooltip-arrow-size-sm: v-bind('cssVars.sliderTooltipArrowSizeSm');
    --vf-slider-tooltip-arrow-size-lg: v-bind('cssVars.sliderTooltipArrowSizeLg');
  }
}
</style>

If theme is not used the project's default theme will be applied to the form.

export ​

The export contains options for the Builder export settings which are not relevant for rendering.

builder ​

The builder contains options for the Builder like form name and preview width which are not relevant for rendering.

LoadingConfiguration
👋 Hire Vueform team for form customizations and developmentLearn more