Nuxt + Storyblok
Trying to render featured stories on my home page but any data I try to get from the story is coming as undefined.
this is my FeaturedServices.vue
My Service Card
this is my FeaturedServices.vue
<template>
<div class="py-24">
<h2 class="text-6xl text-[#50b0ae] font-bold text-center mb-12">{{ blok.headline }}</h2>
<div class="container grid gap-12 mx-auto my-12 md:grid-cols-3 place-items-start">
<ServiceCard v-for="service in blok.services" :key="service.uuid" :service="service.content"
:slug="service.full_slug" />
</div>
</div>
</template>
<script setup>
defineProps({ blok: Object })
</script><template>
<div class="py-24">
<h2 class="text-6xl text-[#50b0ae] font-bold text-center mb-12">{{ blok.headline }}</h2>
<div class="container grid gap-12 mx-auto my-12 md:grid-cols-3 place-items-start">
<ServiceCard v-for="service in blok.services" :key="service.uuid" :service="service.content"
:slug="service.full_slug" />
</div>
</div>
</template>
<script setup>
defineProps({ blok: Object })
</script>My Service Card
<template>
<NuxtLink :to="'/' + slug" v-editable="service"
class="w-full h-full bg-[#f7f6fd] rounded-[5px] text-center overflow-hidden">
<div class="p-4">
<h3 class="text-xl text-[#1d243d] font-bold mb-3">
{{ service?.heading }}
</h3>
<div class="line-clamp-4">
{{ service?.teaser }}
</div>
</div>
</NuxtLink>
{{ service?.slug }}
</template>
<script setup>
defineProps({ service: Object, slug: String })
</script><template>
<NuxtLink :to="'/' + slug" v-editable="service"
class="w-full h-full bg-[#f7f6fd] rounded-[5px] text-center overflow-hidden">
<div class="p-4">
<h3 class="text-xl text-[#1d243d] font-bold mb-3">
{{ service?.heading }}
</h3>
<div class="line-clamp-4">
{{ service?.teaser }}
</div>
</div>
</NuxtLink>
{{ service?.slug }}
</template>
<script setup>
defineProps({ service: Object, slug: String })
</script>
