Configuration
Configuration basics.
Vueform Builder can be configured via builder.config.js:
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:
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>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.
