before suspend

assets/js/components/blog/BlogCard.vue

@@ -0,0 +1,38 @@
+<template>
+	<div
+		class="
+      flex
+      m-2
+      gap-2
+      items-center
+      shadow-md
+      w-1/4
+      flex-grow
+      rounded
+      overflow-hidden
+    "
+		style="border: 1px solid #eee"
+	>
+		<img
+			src="https://via.placeholder.com/150"
+			style="background: #cccccc"
+			width="150"
+			height="150"
+			alt="placeholder"
+		>
+		<router-link :to="{ name: 'BlogPost', params: { id: post.id } }">
+			{{ post.title }}<br>
+			User: {{ post.userId }}
+		</router-link>
+	</div>
+</template>
+<script setup>
+console.log('BlogCard')
+const props = defineProps({
+	post: {
+		type: Object,
+		required: true
+	}
+})
+const post = { ...props.post }
+</script>

assets/js/components/blog/BlogIndex.vue

@@ -0,0 +1,34 @@
+<template>
+	<div
+		class="
+      flex
+      m-2
+      gap-2
+      items-center
+      shadow-md
+      w-1/4
+      flex-grow
+      rounded
+      overflow-hidden
+    "
+		style="border: 1px solid #eee"
+	>
+		BlogIndex
+
+		<BlogCard
+			v-for="post in blogPosts"
+			:key="post.id"
+			:post="post"
+		/>
+	</div>
+</template>
+
+<script setup>
+import useResource from '@/composables/useResource'
+//import useUser from '@/composables/useUser'
+import BlogCard from '@/components/blog/BlogCard'
+
+const { items: blogPosts, fetchAll } = useResource('https://jsonplaceholder.typicode.com/posts')
+fetchAll()
+
+</script>

assets/js/components/blog/BlogPost.vue

@@ -0,0 +1,51 @@
+<template>
+	<div
+		v-if="blogPost"
+		class="
+      flex
+      m-2
+      gap-2
+      items-center
+      shadow-md
+      w-1/4
+      flex-grow
+      rounded
+      overflow-hidden
+    "
+		style="border: 1px solid #eee"
+	>
+		BlogIPost
+		<img
+			src="https://via.placeholder.com/150"
+			style="background: #cccccc"
+			width="150"
+			height="150"
+			alt="placeholder"
+		>
+		user {{ blogPost.userId }}:
+		<div v-if="user">
+			"{{ user.name }}
+		</div>
+		<br>
+		{{ blogPost.title }}<br>
+		{{ blogPost.body }}
+	</div>
+</template>
+
+<script setup>
+import { watch } from 'vue'
+import { useRoute } from 'vue-router'
+import useResource from '@/composables/useResource'
+
+const route = useRoute()
+
+const { item: blogPost, fetchOne: fetchOneBlog } = useResource('https://jsonplaceholder.typicode.com/posts')
+fetchOneBlog(route.params.id)
+
+const { item: user, fetchOne: fetchOneUser } = useResource('https://jsonplaceholder.typicode.com/users')
+watch(
+	() => ({ ...blogPost.value }),
+	() => fetchOneUser(blogPost.value.userId)
+)
+
+</script>