Spookie/assets/js/components/blog/BlogCard.vue

<template>
	<div>
		<!-- media -->
		<div class="h-64 w-auto md:w-1/2">
			<img
				class="inset-0 h-full w-full object-cover object-center"
				src="/build/images/tracer_schmolle150x150.png"
				alt=""
			>
		</div>
		<!-- content -->
		<div class="w-full py-4 px-6 text-gray-800 flex flex-col justify-between">
			<h3 class="font-semibold text-lg leading-tight truncate">
				{{ post.title }}
			</h3>
			<p class="mt-2">
				{{ post.body.split('.')[0] }} …
			</p>
			<p class="text-sm text-gray-700 uppercase tracking-wide font-semibold mt-2">
				{{ post.createdAt.toLocaleString('de-DE') }}
			</p>
			<p v-if="blogUser">
				{{ blogUser }}
			</p>
			<p class="font-normal text-gray-700 mb-3">
				dddd
			</p>
			<router-link
				:to="{ name: 'BlogPost', params: { id: post.id } }"
				class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300
					font-medium rounded-lg text-sm px-3 py-2 text-center inline-flex items-center"
			>
				Read more
			</router-link>
		</div>
	</div>
</template>

<script setup>
import useResource from '@/composables/useResource'

const props = defineProps({
	post: {
		type: Object,
		required: true
	}
})
const post = { ...props.post }

const { items: blogUser, fetchOne } = useResource('users')
fetchOne(post.user)

console.log("blug user", post.user)
console.log(blogUser.value)
</script>