massive perf improvements

on the store page, brings LCP down to only 5.6s from 11s. total lighthouse score is now 78

components/UserHeader/UserWidget.vue

@@ -39,7 +39,11 @@
           </NuxtLink>
           <div class="h-0.5 rounded-full w-full bg-zinc-800" />
           <div class="flex flex-col">
-            <MenuItem v-for="(nav, navIdx) in navigation" v-slot="{ active, close }">
+            <MenuItem
+              v-for="(nav, navIdx) in navigation"
+              v-slot="{ active, close }"
+              hydrate-on-visible
+            >
               <button
                 :href="nav.route"
                 @click="() => navigateTo(nav.route, close)"
@@ -48,8 +52,8 @@
                   'text-left transition block px-4 py-2 text-sm',
                 ]"
               >
-                {{ nav.label }}</button
+                {{ nav.label }}
-              >
+              </button>
             </MenuItem>
           </div>
         </PanelWidget>

layouts/default.vue

@@ -1,10 +1,10 @@
 <template>
   <div v-if="!noWrapper" class="flex flex-col w-full min-h-screen bg-zinc-900">
-    <UserHeader class="z-50" />
+    <UserHeader class="z-50" hydrate-on-idle />
     <div class="grow flex">
       <NuxtPage />
     </div>
-    <UserFooter class="z-50" hydrate-on-visible />
+    <UserFooter class="z-50" hydrate-on-interaction />
   </div>
   <div class="flex w-full min-h-screen bg-zinc-900" v-else>
     <NuxtPage />

nuxt.config.ts

@@ -9,10 +9,12 @@ export default defineNuxtConfig({
   devtools: { enabled: false },
   css: ["~/assets/tailwindcss.css", "~/assets/core.scss"],
 
+  experimental: {
+    buildCache: true,
+  },
+
   vite: {
-    plugins: [
+    plugins: [tailwindcss()],
-      tailwindcss()
-    ]
   },
 
   app: {
@@ -21,7 +23,16 @@ export default defineNuxtConfig({
     },
   },
 
+  routeRules: {
+    "/signin": { prerender: true },
+    "/signout": { prerender: true },
+
+    "/api/**": { cors: true },
+  },
+
   nitro: {
+    minify: true,
+
     experimental: {
       websocket: true,
       tasks: true,
@@ -30,6 +41,20 @@ export default defineNuxtConfig({
     scheduledTasks: {
       "0 * * * *": ["cleanup:invitations"],
     },
+
+    compressPublicAssets: true,
+    publicAssets: [
+      {
+        baseURL: "wallpapers",
+        dir: "public/wallpapers",
+        maxAge: 31536000, // 1 year
+      },
+      {
+        baseURL: "fonts",
+        dir: "public/fonts",
+        maxAge: 31536000, // 1 year
+      },
+    ],
   },
 
   extends: ["./drop-base"],
@@ -39,6 +64,7 @@ export default defineNuxtConfig({
     "vue3-carousel-nuxt",
     "nuxt-security",
     "@nuxt/image",
+    "@nuxt/fonts",
   ],
 
   carousel: {

package.json

@@ -14,6 +14,7 @@
     "@drop/droplet": "^0.7.0",
     "@headlessui/vue": "^1.7.23",
     "@heroicons/vue": "^2.1.5",
+    "@nuxt/fonts": "^0.11.0",
     "@nuxt/image": "1.9.0",
     "@nuxtjs/tailwindcss": "^6.12.2",
     "@prisma/client": "^6.1.0",
@@ -36,7 +37,7 @@
     "uuid": "^10.0.0",
     "vue": "latest",
     "vue-router": "latest",
-    "vue3-carousel-nuxt": "^1.1.3",
+    "vue3-carousel-nuxt": "^1.1.5",
     "vuedraggable": "^4.1.0"
   },
   "devDependencies": {
@@ -47,7 +48,7 @@
     "@types/uuid": "^10.0.0",
     "autoprefixer": "^10.4.20",
     "h3": "^1.13.0",
-    "nitropack": "^2.9.7",
+    "nitropack": "2.11.6",
     "postcss": "^8.4.47",
     "sass": "^1.79.4",
     "tailwindcss": "^4.0.0"
@@ -58,5 +59,10 @@
     "@drop/droplet-linux-x64-gnu": "^0.7.0",
     "@drop/droplet-win32-x64-msvc": "^0.7.0"
   },
-  "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
+  "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e",
+  "overrides": {
+    "vue3-carousel-nuxt": {
+      "vue3-carousel": "^0.15.0"
+    }
+  }
 }

pages/store/index.vue

@@ -80,7 +80,7 @@
     </div>
 
     <!-- recently updated -->
-    <div class="px-4 sm:px-12 py-4">
+    <div class="px-4 sm:px-12 py-4" hydrate-on-visible>
       <h1 class="text-zinc-100 text-2xl font-bold font-display">
         Recently updated
       </h1>