Configuration ​

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 configurations can be applied to the <VueformBuilder> component individually, which will override the default settings from builder.config.js:

<template>
  <VueformBuilder :config="CustomBuilderConfig" />
</template>

<script setup>
import CustomBuilderConfig from './path/to/builder.custom.config.js'
</script>

Client-Side Only Config ​

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

<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>

Default Configuration ​

By default, Vueform Builder is configured to use the Developer version.

Simple Version ​

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