Configuration basics.

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

// builder.config.js

import { defineConfig } from '@vueform/builder'

export default defineConfig({
  // config options

Custom Config

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

  <VueformBuilder :config="customConfig" />

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

  export default {
    data: () => ({
      customConfig: markRaw(CustomBuilderConfig),

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:


<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

Default Configuration

By default Vueform Builder is configured to Developer version.

Simple Version

If you would like to use the Simple version, please head to Presets chapter.

👋 Hire Vueform team for form customizations and developmentLearn more