From abdec720e1fb8a714dee0a7714e9a391e43ea097 Mon Sep 17 00:00:00 2001
From: NHoarau <h.nico.sully@gmail.com>
Date: Mon, 22 Jun 2026 12:57:24 +0400
Subject: [PATCH] fixed hydration mismatch

---
 apps/web/app/app.vue                  | 36 +++------------------------
 apps/web/app/components/AppFooter.vue | 19 ++++++++++++++
 apps/web/app/components/AppHeader.vue | 15 +++++++++++
 apps/web/app/layouts/default.vue      |  3 ---
 apps/web/app/pages/projects/index.vue |  2 +-
 apps/web/nuxt.config.ts               |  4 ---
 6 files changed, 38 insertions(+), 41 deletions(-)
 create mode 100644 apps/web/app/components/AppFooter.vue
 create mode 100644 apps/web/app/components/AppHeader.vue
 delete mode 100644 apps/web/app/layouts/default.vue

diff --git a/apps/web/app/app.vue b/apps/web/app/app.vue
index 9548987..003daaa 100644
--- a/apps/web/app/app.vue
+++ b/apps/web/app/app.vue
@@ -22,43 +22,13 @@ useSeoMeta({
 <template>
   <UApp>
     <div class="flex flex-col min-h-screen">
-      <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>
+      <LazyAppHeader hydrate-on-interaction />
 
       <UMain class="px-6">
-        <NuxtLayout>
-          <NuxtPage />
-        </NuxtLayout>
+        <NuxtPage />
       </UMain>
 
-      <USeparator icon="i-simple-icons-nuxtdotjs" />
-
-      <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>
+      <LazyAppFooter hydrate-on-interaction />
     </div>
   </UApp>
 </template>
diff --git a/apps/web/app/components/AppFooter.vue b/apps/web/app/components/AppFooter.vue
new file mode 100644
index 0000000..5ecaeff
--- /dev/null
+++ b/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>
diff --git a/apps/web/app/components/AppHeader.vue b/apps/web/app/components/AppHeader.vue
new file mode 100644
index 0000000..a6ae194
--- /dev/null
+++ b/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>
diff --git a/apps/web/app/layouts/default.vue b/apps/web/app/layouts/default.vue
deleted file mode 100644
index ba4672f..0000000
--- a/apps/web/app/layouts/default.vue
+++ /dev/null
@@ -1,3 +0,0 @@
-<template>
-  <slot />
-</template>
diff --git a/apps/web/app/pages/projects/index.vue b/apps/web/app/pages/projects/index.vue
index c594188..a6edfd6 100644
--- a/apps/web/app/pages/projects/index.vue
+++ b/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>
 
diff --git a/apps/web/nuxt.config.ts b/apps/web/nuxt.config.ts
index 7a15056..03f6666 100644
--- a/apps/web/nuxt.config.ts
+++ b/apps/web/nuxt.config.ts
@@ -14,10 +14,6 @@ export default defineNuxtConfig({
     },
   },
 
-  routeRules: {
-    "/": { prerender: true },
-  },
-
   compatibilityDate: "2025-01-15",
 
   eslint: {