TsContent - ToolStation - Internal Docs

Overview

The TsContent component dynamically connects Builder.io to its respective model. It supports passing props to seamlessly integrate with other models, enabling flexible and dynamic content rendering.

Component Code

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

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

type Props = {
  customComponents?: any,
  path?: string,
  model?: string
}

const route = useRoute();

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

const config = useRuntimeConfig();

const content = ref(null)
const api_key = config.public.builderApiKey;

try {

  content.value = await new BuilderService(api_key).getItem(props.model,{
    urlPath: props.path || route.path,
  });

} catch (e) {
  
}

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

Usage

Default

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

Using for Other models

<template>
  <!-- By default it connect page with the page model -->
  <TsContent 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.
path	`string`	""	It is used to provide url path of the page which we are connecting with builder
customComponents	`any`	""	It is used to pass custom components to register on builder for specific model.

TsBannerWithTwoSegmentsMobile

TsContentPage