feat: display random image on refresh

app.vue

@@ -1,7 +1,28 @@
+<script setup lang="ts">
+import { resolve } from "path";
+import { readdir } from "fs/promises";
+
+const images = await readdir(resolve("public", "lilou"));
+const image = images[Math.floor(Math.random() * images.length)];
+const imagePath = `/lilou/${image}`;
+</script>
+
 <template>
-  <div>
+  <main
+    class="h-[100vh] items-center justify-center p-5 flex flex-col space-y-4 bg-[#fa86c4]"
+  >
     <NuxtRouteAnnouncer />
 
-    <p>Ok</p>
+    <h1
-  </div>
+      class="text-4xl md:text-5xl lg:text-6xl font-serif text-white dark:text-white"
+    >
+      ✨ Lilou ✨
+    </h1>
+    <img class="w-full max-w-[50vh]" :src="imagePath" alt="Lilou" />
+    <h1
+      class="text-4xl md:text-5xl lg:text-6xl font-serif text-white dark:text-white"
+    >
+      ✨ Lilou ✨
+    </h1>
+  </main>
 </template>

nuxt.config.ts

@@ -2,5 +2,5 @@
 export default defineNuxtConfig({
   compatibilityDate: "2024-04-03",
   devtools: { enabled: true },
-  modules: ["@nuxt/eslint"],
+  modules: ["@nuxt/eslint", "@nuxtjs/tailwindcss"],
 });

package.json

@@ -12,9 +12,13 @@
   },
   "dependencies": {
     "@nuxt/eslint": "^0.6.0",
+    "@nuxtjs/tailwindcss": "^6.12.2",
     "nuxt": "^3.13.0",
     "vue": "latest",
     "vue-router": "latest"
   },
-  "packageManager": "pnpm@9.11.0"
+  "packageManager": "pnpm@9.11.0",
+  "devDependencies": {
+    "typescript": "5.5.4"
+  }
 }