Configuration

This module provides many options to customize its behavior. Opinionated defaults are provided for all applicable options, but you may override them as needed.

API Key

To use this module, you must either provide a BUILDER_API_KEY environment variable (such as through a .env file or your deployment service), or set the apiKey option in the module configuration.

You can retrieve this API key from your space dashboard settings (the Public API Key setting under Space).

export default defineNuxtConfig({
  // ...
  builderIO: {
    apiKey: 'abcxyz...'
  }
})

Auto-imports

By default, this module will automatically import various functions from the @builder.io/sdk-vue package. To disable this feature, set autoImports to false in the module configuration.

export default defineNuxtConfig({
  // ...
  builderIO: {
    autoImports: false
  }
})

Alternatively, you can provide a custom list of imports as a string array. Each item in the array should be a valid export from @builder.io/sdk-vue.

export default defineNuxtConfig({
  // ...
  builderIO: {
    // These are the default auto-imports provided by the module
    autoImports: [
      'fetchEntries',
      'fetchOneEntry',
      'fetchBuilderProps',
      'isEditing',
      'isPreviewing',
      'setEditorSettings',
      'getBuilderSearchParams',
      'createRegisterComponentMessage'
    ]
  }
})

Default model

The defaultModel option controls the default model used by the BuilderContent component if none is provided. The default value is page, which is the built-in starter model provided by Builder.

export default defineNuxtConfig({
  // ...
  builderIO: {
    defaultModel: 'page'
  }
})

Components

One of the primary features of this module is the ability to automatically register a subset of your project's Vue components as custom components in Builder. This allows you to use your own components in Builder content.

By default, this module will automatically register all Vue components in your project's builder/components directory. This can be customized using the following options:

export default defineNuxtConfig({
  // ...
  builderIO: {
    components: {
      enabled: true, // Setting this to `false` will disable the feature entirely
      dir: 'builder/components', // The directory to search for components in
      prefix: 'BuilderCustom' // The prefix to use for all registered components; this is only used internally
    }
  }
})

See the Custom Components feature for more information.

Inject CSS

By default, this module will globally import the @builder-io/sdk-vue/css file in your application. This allows features such as the built-in Columns component to function correctly.