TsContentStatic - ToolStation

Overview

The TsContentStatic component is designed for scenarios where content fetching is managed externally. It accepts pre-fetched content via the content prop, allowing for flexible integration while ensuring efficient rendering of static Builder.io content.

Component Code

<template>
  <div>
    <Content
        :model="props.model"
        :content="props.content"
        :api-key="api_key"
        :customComponents="getRegisteredComponents()"
    />
  </div>
</template>

<script setup lang="ts">
import { Content } from '@builder.io/sdk-vue';
import { REGISTERED_COMPONENTS } from '~/utils/init-builder';

type Props = {
  content?: any,
  model?: string
}

const props = withDefaults(defineProps<Props>(), {
  model: 'page'
})

const config = useRuntimeConfig();

const api_key = config.public.builderApiKey;

const getRegisteredComponents = () => {
  return REGISTERED_COMPONENTS;
}
</script>

Usage

Default

<template>
  <!-- By default it connect page with the page model -->
  <TsContentStatic />
</template>

Using for Other models

<template>
  <!-- By default it connect page with the page model -->
  <TsContentStatic model="model-unique-identifier"/>
</template>

Props

Name	Type	Default	Description
model	`string`	"page"	`model` is used pass the unique identifier of the model with you want to connect your page model.
content	`any`	""	It is used to provide the content to the component which is handle externally.

TsContentPage

BannerLayout