Create Card.vue for list layout
layers/{layer}/collections/{{ collection }}/app/components/Card.vue
Example Card.vue structure:
<script setup lang="ts">
interface Props {
item: any
layout: 'list' | 'grid' | 'cards'
collection: string
}
defineProps<Props>()
</script>
<template>
<div v-if="layout === 'list'">
{{ item.name }}
</div>
</template>
Create Card.vue for grid layout
layers/{layer}/collections/{{ collection }}/app/components/Card.vue
Example Card.vue with grid layout:
<template>
<UCard v-if="layout === 'grid'" class="hover:shadow-lg">
<template #header>
<h3>{{ item.title }}</h3>
</template>
{{ item.description }}
</UCard>
</template>
Create Card.vue for cards layout
layers/{layer}/collections/{{ collection }}/app/components/Card.vue
Example Card.vue with detailed cards layout:
<template>
<UCard v-if="layout === 'cards'" class="hover:shadow-xl">
<template #header>
<h3 class="text-lg">{{ item.title }}</h3>
</template>
<div class="space-y-2">
<p>{{ item.description }}</p>
<!-- More detailed content -->
</div>
</UCard>
</template>