v.0.0.5 pass props and pool-bg

src/App.vue

@@ -5,17 +5,34 @@ import FetchFromApi from "./components/FetchFromApi.vue";
 
 import pkg from "../package.json"; // Works out-of-the-box in Vite
 
+import pool_bg from "@/assets/images/swimming-pool.jpg";
+import type { Album } from "./types/album.ts";
+
 document.title = `${pkg.name} ${pkg.version}©2026`;
+
+const dummy_album: Album = {
+  id: 1,
+  title: "Dummy Title",
+  userId: 4711,
+};
 </script>
 
 <template>
-  <div class="container">
-    <FirstVueComponent class="component-box-fade" />
-    <SecondVueComponent />
-    <FetchFromApi class="component-box-fade" />
+  <div
+    class="min-h-screen bg-cover"
+    :style="{ backgroundImage: `url(${pool_bg})` }"
+  >
+    <div class="container">
+      <FirstVueComponent class="component-box-fade" />
+      <SecondVueComponent
+        msg="Moin TiiJay"
+        text_size="text-sm"
+        :album="dummy_album"
+      />
+      <FetchFromApi class="component-box-fade" />
+    </div>
   </div>
 </template>
-
 <style scoped>
 .container {
   display: flex;

src/components/SecondVueComponent.vue

@@ -1,7 +1,22 @@
 <script setup lang="ts">
 import { ref } from "vue";
+import type { Album } from "@/types/album";
 
-const a = ref<boolean>(true);
+const show_it = ref<boolean>(true);
+defineProps({
+  msg: {
+    type: String,
+    default: "Hello default World",
+  },
+  text_size: {
+    type: String as () => "text-sm" | "text-2xl" | "text-4xl",
+    default: "text-2xl",
+  },
+  album: {
+    type: Object as () => Album,
+    required: true,
+  },
+});
 </script>
 
 <template>
@@ -9,7 +24,10 @@ const a = ref<boolean>(true);
     class="m-2.5 w-1/3 rounded-2xl bg-linear-to-br from-emerald-200 to-emerald-500 border-2"
   >
     <div class="p-1.5">
-      <p class="text-2xl font-light" v-if="a">Hello World.</p>
+      <p class="font-light" :class="text_size" v-if="show_it">{{ msg }}</p>
+      <p class="font-light">{{ album.id }}</p>
+      <p class="font-light">{{ album.title }}</p>
+      <p class="font-light">{{ album.userId }}</p>
     </div>
   </div>
 </template>

src/main.ts

@@ -1,5 +1,5 @@
 import { createApp } from "vue";
 import App from "@/App.vue";
-import "@/assets/global.css";
+import "@/assets/styles/global.css";
 
 createApp(App).mount("#app");