Skip to content

useCmsBlock ​

Usage ​

It can be used in a block context, where there is an access to the slots, available for specific block.

ts
const props = defineProps<{
  // type reflects the context of the block
  content: CmsBlockImageThreeColumn;
}>();

const { getSlotContent } = useCmsBlock(props.content);

const leftContent = getSlotContent("left");
const centerContent = getSlotContent("center");

Definition ​

Composable to get cms block content

Basic usage ​

ts
const {  block, getSlotContent } = useCmsBlock(content);

Signature ​

ts
export function useCmsBlock<BLOCK_TYPE extends CmsBlock>(
  content: BLOCK_TYPE,
): UseCmsBlockReturn 

Parameters ​

NameTypeDescription
content
BLOCK_TYPE

Return type ​

See UseCmsBlockReturn
ts
export type UseCmsBlockReturn = {
  /**
   * Cms block content
   */
  block: CmsBlock;
  /**
   * Get slot content by slot name (identifier)
   * @example getSlotContent("main")
   */
  getSlotContent(slotName: string): ArrayElement<CmsBlock["slots"]>;
};

Properties ​

NameTypeDescription
block
CmsBlock
Cms block content

Methods ​

NameTypeDescription
getSlotContent
ArrayElement<>
Get slot content by slot name (identifier)
useCmsBlock has loaded