version update to nuxt4

app/components/dynamicZone/ColumnImageText.vue

@@ -0,0 +1,24 @@
+<template>
+  <div class="flex flex-col md:flex-row gap-8 md:gap-4">
+    <NuxtPicture
+      loading="lazy"
+      class="w-full md:w-1/2 min-w-[50%] object-cover object-center"
+      :class="data?.image_left ? 'order-0' : 'order-1'"
+      :src="baseUrl + data?.image.url"
+      :imgAttrs="{ class: 'w-full h-full object-cover object-center' }"
+    />
+    <FieldContent :data="data?.text" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { PropType } from "vue";
+import type DynamicZoneColumnImageText from "~~/types/component/dynamic-zone/columnImageText";
+
+const runtimeConfig = useRuntimeConfig();
+const baseUrl = runtimeConfig.public.strapi.url;
+
+defineProps({
+  data: Object as PropType<DynamicZoneColumnImageText>,
+});
+</script>

app/components/dynamicZone/DualColumnText.vue

@@ -0,0 +1,15 @@
+<template>
+  <div class="flex flex-col md:flex-row gap-8 md:gap-4">
+    <FieldContent :data="data?.left_side" />
+    <FieldContent :data="data?.right_side" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { PropType } from "vue";
+import type DynamicZoneDualColumnText from "~~/types/component/dynamic-zone/dualColumnText";
+
+defineProps({
+  data: Object as PropType<DynamicZoneDualColumnText>,
+});
+</script>

app/components/dynamicZone/Embedding.vue

@@ -0,0 +1,14 @@
+<template>
+  <div class="flex flex-col gap-2 w-full min-h-fit max-w-4xl mx-auto">
+    <iframe :src="data?.link" class="w-full h-[90vh]"></iframe>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { PropType } from "vue";
+import type DynamicZoneEmbedding from "~~/types/component/dynamic-zone/embedding";
+
+const props = defineProps({
+  data: Object as PropType<DynamicZoneEmbedding>,
+});
+</script>

app/components/dynamicZone/FileDownload.vue

@@ -0,0 +1,24 @@
+<template>
+  <div class="flex flex-col gap-2 w-full min-h-fit max-w-4xl mx-auto">
+    <a
+      :href="baseUrl + data?.file.url"
+      :download="data?.file.name"
+      target="_blank"
+      class="w-fit text-primary underline"
+    >
+      Datei {{ data?.file.name }} herunterladen
+    </a>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { PropType } from "vue";
+import type DynamicZoneFileDownload from "~~/types/component/dynamic-zone/fileDownload";
+
+const runtimeConfig = useRuntimeConfig();
+const baseUrl = runtimeConfig.public.strapi.url;
+
+defineProps({
+  data: Object as PropType<DynamicZoneFileDownload>,
+});
+</script>

app/components/dynamicZone/FileViewer.vue

@@ -0,0 +1,42 @@
+<template>
+  <div v-if="showComponent" class="flex flex-col gap-2 w-full min-h-fit max-w-4xl mx-auto">
+    <iframe v-if="data?.file.mime == 'application/pdf'" :src="baseUrl + data.file.url" class="w-full h-[90vh]"></iframe>
+    <NuxtPicture
+      v-else-if="data?.file.mime.includes('image')"
+      loading="lazy"
+      class="w-full object-cover object-center mx-auto"
+      :src="baseUrl + data?.file.url"
+      :imgAttrs="{ class: 'w-full h-full object-cover object-center' }"
+    />
+    <video
+      v-else-if="data?.file.mime.includes('video')"
+      class="w-full max-w-full h-auto object-contain"
+      controls
+      controlsList="nodownload"
+    >
+      <source :src="baseUrl + data?.file.url" type="video/mp4" />
+    </video>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { PropType } from "vue";
+import type DynamicZoneFileViewer from "~~/types/component/dynamic-zone/fileViewer";
+
+const runtimeConfig = useRuntimeConfig();
+const baseUrl = runtimeConfig.public.strapi.url;
+
+const props = defineProps({
+  data: Object as PropType<DynamicZoneFileViewer>,
+});
+
+const showComponent = computed(() => {
+  if (
+    props.data?.file.mime == "application/pdf" ||
+    props.data?.file.mime.includes("image") ||
+    props.data?.file.mime.includes("video")
+  ) {
+    return true;
+  }
+});
+</script>

app/components/dynamicZone/FullImage.vue

@@ -0,0 +1,20 @@
+<template>
+  <NuxtPicture
+    loading="lazy"
+    class="w-full lg:w-1/2 lg:min-w-[50%] object-cover object-center mx-auto"
+    :src="baseUrl + data?.image.url"
+    :imgAttrs="{ class: 'w-full h-full object-cover object-center' }"
+  />
+</template>
+
+<script setup lang="ts">
+import type { PropType } from "vue";
+import type DynamicZoneFullImage from "~~/types/component/dynamic-zone/fullImage";
+
+const runtimeConfig = useRuntimeConfig();
+const baseUrl = runtimeConfig.public.strapi.url;
+
+defineProps({
+  data: Object as PropType<DynamicZoneFullImage>,
+});
+</script>

app/components/dynamicZone/FullText.vue

@@ -0,0 +1,12 @@
+<template>
+  <FieldContent :data="data?.text" />
+</template>
+
+<script setup lang="ts">
+import type { PropType } from "vue";
+import type DynamicZoneFullText from "~~/types/component/dynamic-zone/fullText";
+
+defineProps({
+  data: Object as PropType<DynamicZoneFullText>,
+});
+</script>

app/components/dynamicZone/Gallery.vue

@@ -0,0 +1,23 @@
+<template>
+  <div class="flex flex-row flex-wrap gap-2 w-full min-h-fit">
+    <NuxtPicture
+      v-for="img in data?.images"
+      loading="lazy"
+      class="max-sm:w-full sm:h-48 object-cover object-center"
+      :src="baseUrl + img.url"
+      :imgAttrs="{ class: 'max-sm:w-full sm:h-48 object-cover object-center' }"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { PropType } from "vue";
+import type DynamicZoneGallery from "~~/types/component/dynamic-zone/gallery";
+
+const runtimeConfig = useRuntimeConfig();
+const baseUrl = runtimeConfig.public.strapi.url;
+
+defineProps({
+  data: Object as PropType<DynamicZoneGallery>,
+});
+</script>

app/components/dynamicZone/Section.vue

@@ -0,0 +1,13 @@
+<template>
+  <h1 class="text-center">{{ data?.title }}</h1>
+  <p v-if="data?.description" class="text-center text-[#5c5c5c]">{{ data?.description }}</p>
+</template>
+
+<script setup lang="ts">
+import type { PropType } from "vue";
+import type DynamicZoneSection from "~~/types/component/dynamic-zone/section";
+
+defineProps({
+  data: Object as PropType<DynamicZoneSection>,
+});
+</script>

app/components/dynamicZone/Spacer.vue

@@ -0,0 +1,12 @@
+<template>
+  <div class="bg-primary h-2 rounded-full w-48 mx-auto"></div>
+</template>
+
+<script setup lang="ts">
+import type { PropType } from "vue";
+import type DynamicZoneSpacer from "~~/types/component/dynamic-zone/spacer";
+
+defineProps({
+  data: Object as PropType<DynamicZoneSpacer>,
+});
+</script>