fixed hydration mismatch

apps/web/app/app.vue

@@ -22,43 +22,13 @@ useSeoMeta({
 <template>
   <UApp>
     <div class="flex flex-col min-h-screen">
-      <UHeader>
+      <LazyAppHeader hydrate-on-interaction />
-        <template #left>
-          <NuxtLink to="/">
-            <AppLogo class="w-auto h-6 shrink-0" />
-          </NuxtLink>
-
-          <UButton to="/projects" label="Projects" color="neutral" variant="ghost" />
-        </template>
-
-        <template #right>
-          <UColorModeButton />
-        </template>
-      </UHeader>
 
       <UMain class="px-6">
-        <NuxtLayout>
         <NuxtPage />
-        </NuxtLayout>
       </UMain>
 
-      <USeparator icon="i-simple-icons-nuxtdotjs" />
+      <LazyAppFooter hydrate-on-interaction />
-
-      <UFooter>
-        <template #left>
-          <p class="text-sm text-muted">Built with Nuxt UI • © {{ new Date().getFullYear() }}</p>
-        </template>
-
-        <template #right>
-          <UButton
-            to="https://github.com/nuxt-ui-templates/starter"
-            target="_blank"
-            icon="i-simple-icons-github"
-            aria-label="GitHub"
-            color="neutral"
-            variant="ghost" />
-        </template>
-      </UFooter>
     </div>
   </UApp>
 </template>

apps/web/app/components/AppFooter.vue

@@ -0,0 +1,19 @@
+<template>
+  <USeparator icon="i-simple-icons-nuxtdotjs" />
+
+  <UFooter data-allow-mismatch="children">
+    <template #left>
+      <p class="text-sm text-muted">Built with Nuxt UI • © {{ new Date().getFullYear() }}</p>
+    </template>
+
+    <template #right>
+      <UButton
+        to="https://github.com/nuxt-ui-templates/starter"
+        target="_blank"
+        icon="i-simple-icons-github"
+        aria-label="GitHub"
+        color="neutral"
+        variant="ghost" />
+    </template>
+  </UFooter>
+</template>

apps/web/app/components/AppHeader.vue

@@ -0,0 +1,15 @@
+<template>
+  <UHeader>
+    <template #left>
+      <NuxtLink to="/">
+        <AppLogo class="w-auto h-6 shrink-0" />
+      </NuxtLink>
+
+      <UButton to="/projects" label="Projects" color="neutral" variant="ghost" />
+    </template>
+
+    <template #right>
+      <UColorModeButton />
+    </template>
+  </UHeader>
+</template>

apps/web/app/layouts/default.vue

@@ -1,3 +0,0 @@
-<template>
-  <slot />
-</template>

apps/web/app/pages/projects/index.vue

@@ -36,7 +36,7 @@ const columns: TableColumn<Project>[] = [
     cell: ({ row }) => row.getValue("description") ?? "—",
   },
   { accessorKey: "createdAt", header: "Created" },
-  { id: "actions", header: "" },
+  { id: "actions", header: "Actions" },
 ];
 </script>
 

apps/web/nuxt.config.ts

@@ -14,10 +14,6 @@ export default defineNuxtConfig({
     },
   },
 
-  routeRules: {
-    "/": { prerender: true },
-  },
-
   compatibilityDate: "2025-01-15",
 
   eslint: {