Create Elements (CMS)

Start with importing the correct element type from the @shopware/composables package and using it in the defineProps method to define the type of your content property:

<!-- app/components/cms/CmsElementImage.vue -->

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

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

Now, you can use props.content to access all properties of the element in your template.

<!-- app/components/cms/CmsElementImage.vue -->

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

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

<template>
  <img :src="props.content.data.media.url" />
</template>

However, for some elements the configuration can be quite complex, so there are composables to give you a hand:

<!-- app/components/cms/CmsElementImage.vue -->

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

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

const {
  containerStyle,
  displayMode, // cover, contain, stretch etc.
  imageAttrs, // automatically resolves src, alt and srcset attributes
} = useCmsElementImage(props.content);
</script>

<template>
  <div :style="containerStyle">
    <img v-bind="imageAttrs" />
  </div>
</template>

useCmsElementImage returns more than these three values, and getConfigValue from useCmsElementConfig returns false for a config entry mapped from the surrounding entity. The Rendering CMS Pages recipe lists both.