Configuration

General configuration options.

Vueform Builder can be configured via builder.config.js:

js
// builder.config.js

export default {
  // config options
}

Custom Config

Custom configuration can be applied to <VueformBuilder> individually which will be used instead of the default builder.config.js:

vue
<template>
  <VueformBuilder :config="customConfig" />
</template>

<script>
  import { markRaw } from 'vue'
  import CustomBuilderConfig from './path/to/builder.custom.config.js'

  export default {
    data: () => ({
      customConfig: markRaw(CustomBuilderConfig),
    })
  }
</script>

Client-Side Only Config

Importing certain named exports of @vueform/builder can cause issues on server-side. Here's a way to load a custom configuration on client-side only using dynamic import:

vue
<template>
  <VueformBuilder
    v-if="configLoaded"
    :config="config"
  />
</template>

<script setup>
import { ref, onMounted } from 'vue'

const configLoaded = ref(false)
const config = ref(undefined)

onMounted(async () => {
  config.value = (await import('./custom.config.js')).default
  configLoaded.value = true
})
</script>

Settings

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

js
// builder.config.js

export default {
  storagePrefix: null, // prefixes localStorage keys
  delay: 300, // the ms to wait between last text input and preview rerender, `false` turns it off (not recommended)
  autosave: 1000, // the ms to wait between last change and saving data to local storage & triggering `@save` event
  history: true, // whether it should store history
  maxHistory: -1, // the maximum number of history items to store, `-1` for unlimited
  longFieldNames: false, // whether conditional field names should be full path or name only
}
👋 Hire Vueform team for form customizations and developmentLearn more