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

<template>
	<div class="pt-6 pb-12 bg-gray-300">
		<div
			id="card"
			class=""
		>
			<h2 class="text-center font-serif  uppercase text-4xl xl:text-5xl">
				Recent Articles
			</h2>
			<!-- container for all cards -->
			<div class="container w-100 lg:w-4/5 mx-auto flex flex-col">
				<BlogCard
					v-for="post in blogPosts"
					:key="post.id"
					:post="post"
					class="
						flex flex-col md:flex-row overflow-hidden bg-white rounded-lg
						shadow-xl mt-4 w-100 mx-2"
				/>
			</div>
		</div>
	</div>
</template>

<script setup async>

import useResource from '@/composables/useResource'
//import useUser from '@/composables/useUser'
import BlogCard from '@/components/blog/BlogCard'

const {
	items: blogPosts,
	fetchAll
} = useResource('users/1/blogPosts')
fetchAll()

</script>