before symfony/security-bundle update

assets/js/components/blog/BlogCard.vue

@@ -1,33 +1,44 @@
 <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>
+		<!-- 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>
-console.log('BlogCard')
+import useResource from '@/composables/useResource'
+
 const props = defineProps({
 	post: {
 		type: Object,
@@ -35,4 +46,10 @@ const props = defineProps({
 	}
 })
 const post = { ...props.post }
+
+const { items: blogUser, fetchOne } = useResource('users')
+fetchOne(post.user)
+
+console.log("blug user", post.user)
+console.log(blogUser.value)
 </script>

assets/js/components/blog/BlogIndex.vue

@@ -1,34 +1,37 @@
 <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 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>
+<script setup async>
+
 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')
+const {
+	items: blogPosts,
+	fetchAll
+} = useResource('users/1/blogPosts')
 fetchAll()
 
 </script>

assets/js/components/blog/BlogPost.vue

@@ -32,20 +32,16 @@
 	</div>
 </template>
 
-<script setup>
-import { watch } from 'vue'
+<script setup async>
 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)
+await fetchOneBlog(route.params.id)
 
 const { item: user, fetchOne: fetchOneUser } = useResource('https://jsonplaceholder.typicode.com/users')
-watch(
-	() => ({ ...blogPost.value }),
-	() => fetchOneUser(blogPost.value.userId)
-)
+fetchOneUser(blogPost.value.userId)
 
 </script>