version update to nuxt4

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>