<BuilderContent>

The <BuilderContent> component renders content from Builder.io while abstracting away any complex setup. It is the primary component provided by this module. It is primarily meant to render entire pages.

By default, it will query Builder using the defaultModel option (defaults to page) and the current route as the path. It will also automatically register any custom components you have defined in your project.

Examples

Plug-and-play

<!-- app.vue -->
<template>
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>

<!-- layouts/default.vue -->
<template>
  <slot />
</template>

<!-- pages/[...slug].vue -->
<template>
  <BuilderContent
    throw-error
  >
</template>

This example uses a catch-all route to render all of your application's pages with Builder content. This automatically uses the current route's path (as defined by useRoute/$route) and the default model.

If the page does not exist, the throw-error prop will cause the component to throw a 404 error. This removes the need for custom validation.

Props

model

• Type: string
• Required: false

If provided, this component will use the specified Builder model instead of the defaultModel option.

path

• Type: string
• Required: false

If provided, this component will use the specified path instead of the current route's path.

throwError

• Type: boolean
• Required: false

If true, this component will throw a 404 error if the content does not exist. This removes the need for custom validation.

customComponents

• Type: BuilderComponent[]

If provided, this component will use the specified custom components. This will replace your project's custom components if that feature is enabled.

extra

• Type: object
• Required: false

If provided, this object will be merged with the query sent to Builder. This can be used to add extra query parameters or override defaults.

Events

load

• Type: BuilderResponse

Called when the component has loaded content from Builder. The direct API response is passed as the first argument.