Appearance
Create Elements (CMS) ​
Start with importing the correct element type from the composables-next
package and using it in the defineProps
method to define the type of your content
property:
vue
<!-- components/cms/CmsElementImage.vue -->
<script setup lang="ts">
import { CmsElementImage } from "@shopware-pwa/composables-next";
const props = defineProps<{
content: CmsElementImage;
}>();
</script>
Now, you can use props.content
to access all properties of the element in your template.
vue
<!-- components/cms/CmsElementImage.vue -->
<script setup lang="ts">
// see above
</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:
vue
<!-- components/cms/CmsElementImage.vue -->
<script setup lang="ts">
import { CmsElementImage, useCmsElementImage } from "@shopware-pwa/composables-next";
const props = defineProps<{
content: CmsElementImage
}>();
const {
containerStyle, // padding, background-color etc.
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>