ff-webpage/components/shared/List.vue

<template>
  <div v-for="item in collection" :key="item.slug" class="contents">
    <BaseListImageItem v-if="data?.lookup.imageItem" :data="item" />
    <BaseListItem v-else :data="item" />
  </div>
</template>

<script setup lang="ts">
import type { PropType } from "vue";
import type SharedList from "../../types/component/sharedList";
import type BaseCollection from "~/types/collection/baseCollection";

const { find } = useStrapi();

const props = defineProps({
  data: Object as PropType<SharedList>,
});

const { data: collections } = await useAsyncData("collection", () =>
  find<BaseCollection>(props.data?.lookup.collection ?? "", {
    populate: {
      populate: "*",
    },
  })
);
const collection = ref<Array<BaseCollection> | undefined>(collections.value?.data);
</script>