Create Blocks (CMS)

Create the file under a directory registered with global: true — app/components/cms/ in vue-starter-template — as Overwrite CMS components explains.

Next, import the correct type for your block and use it to define the content property:

<!-- app/components/cms/CmsBlockImageThreeColumn.vue -->
<script setup lang="ts">
import type { CmsBlockImageThreeColumn } from "@shopware/composables";

const props = defineProps<{
  content: CmsBlockImageThreeColumn;
}>();
</script>

Slots

Only for cms-base package

Also here, if you are not using the cms-base package, you have to come up with your own implementation of a generic component that handles the slot resolution. In that case, please ignore the mentions of CmsGenericElement.

Since blocks are usually layouts, they have slots which can be filled with dynamic content - CMS elements. Since blocks are flexible, the specific type of the element is not known in advance.

For that reason, there's a generic element CmsGenericElement which can be placed in every slot. It receives the content configuration as its only prop.

Let's build the image-three-column block, which has three slots - left, center and right.

<script setup lang="ts">
import type { CmsBlockImageThreeColumn } from "@shopware/composables";

import { computed, useCmsBlock } from "#imports";

const props = defineProps<{
  content: CmsBlockImageThreeColumn;
}>();

// A getter keeps the lookups pointed at the current block, and a computed
// re-runs the lookup when that block is replaced.
const { getSlotContent } = useCmsBlock(() => props.content);

const leftContent = computed(() => getSlotContent("left"));
const rightContent = computed(() => getSlotContent("right"));
const centerContent = computed(() => getSlotContent("center"));
</script>
<template>
  <div class="grid grid-cols-3">
    <CmsGenericElement :content="leftContent" />
    <CmsGenericElement :content="centerContent" />
    <CmsGenericElement :content="rightContent" />
  </div>
</template>

Now you can go ahead and override blocks and elements step by step. The Rendering CMS Pages recipe explains how a block's content reaches this component, and why the getter and the computed matter.