From e6175d86370e73337ba760c16d958ef1f50cf03e Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Mon, 27 Oct 2025 15:12:30 +0100
Subject: [PATCH] Add transitions, wrap pages for single root node

---
 app/app.vue                   |  12 ++++
 app/layouts/docs.vue          |  34 ------------
 app/pages/blog.vue            |   4 +-
 app/pages/blog/[slug].vue     | 100 +++++++++++++++++-----------------
 app/pages/blog/index.vue      |  56 ++++++++++---------
 app/pages/changelog/index.vue |  40 +++++++-------
 app/pages/docs.vue            |  28 ++++++++++
 app/pages/docs/[...slug].vue  |  48 ++++++++--------
 app/pages/login.vue           |  58 ++++++++++----------
 app/pages/signup.vue          |  44 ++++++++-------
 nuxt.config.ts                |  11 ++++
 11 files changed, 233 insertions(+), 202 deletions(-)
 delete mode 100644 app/layouts/docs.vue
 create mode 100644 app/pages/docs.vue

diff --git a/app/app.vue b/app/app.vue
index cd3be20a..cd783b7d 100644
--- a/app/app.vue
+++ b/app/app.vue
@@ -71,3 +71,15 @@ provide('navigation', navigation)
     </ClientOnly>
   </UApp>
 </template>
+
+<style>
+.blur-enter-active,
+.blur-leave-active {
+  transition: all 0.4s;
+}
+.blur-enter-from,
+.blur-leave-to {
+  opacity: 0;
+  filter: blur(1rem);
+}
+</style>
\ No newline at end of file
diff --git a/app/layouts/docs.vue b/app/layouts/docs.vue
deleted file mode 100644
index fc76f956..00000000
--- a/app/layouts/docs.vue
+++ /dev/null
@@ -1,34 +0,0 @@
-<script setup lang="ts">
-import type { ContentNavigationItem } from '@nuxt/content'
-
-const navigation = inject<Ref<ContentNavigationItem[]>>('navigation')
-</script>
-
-<template>
-  <div>
-    <AppHeader />
-
-    <UMain>
-      <UContainer>
-        <UPage>
-          <template #left>
-            <UPageAside>
-              <template #top>
-                <UContentSearchButton :collapsed="false" />
-              </template>
-
-              <UContentNavigation
-                :navigation="navigation"
-                highlight
-              />
-            </UPageAside>
-          </template>
-
-          <slot />
-        </UPage>
-      </UContainer>
-    </UMain>
-
-    <AppFooter />
-  </div>
-</template>
diff --git a/app/pages/blog.vue b/app/pages/blog.vue
index 8f62b8bf..2b1be090 100644
--- a/app/pages/blog.vue
+++ b/app/pages/blog.vue
@@ -1,3 +1,5 @@
 <template>
-  <NuxtPage />
+  <div>
+    <NuxtPage />
+  </div>
 </template>
diff --git a/app/pages/blog/[slug].vue b/app/pages/blog/[slug].vue
index 4dc62156..85e6554c 100644
--- a/app/pages/blog/[slug].vue
+++ b/app/pages/blog/[slug].vue
@@ -34,59 +34,61 @@ if (post.value.image?.src) {
 </script>
 
 <template>
-  <UContainer v-if="post">
-    <UPageHeader
-      :title="post.title"
-      :description="post.description"
-    >
-      <template #headline>
-        <UBadge
-          v-bind="post.badge"
-          variant="subtle"
-        />
-        <span class="text-muted">&middot;</span>
-        <time class="text-muted">{{ new Date(post.date).toLocaleDateString('en', { year: 'numeric', month: 'short', day: 'numeric' }) }}</time>
-      </template>
-
-      <div class="flex flex-wrap items-center gap-3 mt-4">
-        <UButton
-          v-for="(author, index) in post.authors"
-          :key="index"
-          :to="author.to"
-          color="neutral"
-          variant="subtle"
-          target="_blank"
-          size="sm"
-        >
-          <UAvatar
-            v-bind="author.avatar"
-            alt="Author avatar"
-            size="2xs"
+  <div v-if="post">
+    <UContainer>
+      <UPageHeader
+        :title="post.title"
+        :description="post.description"
+      >
+        <template #headline>
+          <UBadge
+            v-bind="post.badge"
+            variant="subtle"
           />
+          <span class="text-muted">&middot;</span>
+          <time class="text-muted">{{ new Date(post.date).toLocaleDateString('en', { year: 'numeric', month: 'short', day: 'numeric' }) }}</time>
+        </template>
 
-          {{ author.name }}
-        </UButton>
-      </div>
-    </UPageHeader>
+        <div class="flex flex-wrap items-center gap-3 mt-4">
+          <UButton
+            v-for="(author, index) in post.authors"
+            :key="index"
+            :to="author.to"
+            color="neutral"
+            variant="subtle"
+            target="_blank"
+            size="sm"
+          >
+            <UAvatar
+              v-bind="author.avatar"
+              alt="Author avatar"
+              size="2xs"
+            />
 
-    <UPage>
-      <UPageBody>
-        <ContentRenderer
-          v-if="post"
-          :value="post"
-        />
+            {{ author.name }}
+          </UButton>
+        </div>
+      </UPageHeader>
 
-        <USeparator v-if="surround?.length" />
+      <UPage>
+        <UPageBody>
+          <ContentRenderer
+            v-if="post"
+            :value="post"
+          />
 
-        <UContentSurround :surround="surround" />
-      </UPageBody>
+          <USeparator v-if="surround?.length" />
 
-      <template
-        v-if="post?.body?.toc?.links?.length"
-        #right
-      >
-        <UContentToc :links="post.body.toc.links" />
-      </template>
-    </UPage>
-  </UContainer>
+          <UContentSurround :surround="surround" />
+        </UPageBody>
+
+        <template
+          v-if="post?.body?.toc?.links?.length"
+          #right
+        >
+          <UContentToc :links="post.body.toc.links" />
+        </template>
+      </UPage>
+    </UContainer>
+  </div>
 </template>
diff --git a/app/pages/blog/index.vue b/app/pages/blog/index.vue
index c9033bdd..e3694299 100644
--- a/app/pages/blog/index.vue
+++ b/app/pages/blog/index.vue
@@ -18,32 +18,34 @@ defineOgImageComponent('Saas')
 </script>
 
 <template>
-  <UContainer>
-    <UPageHeader
-      v-bind="page"
-      class="py-[50px]"
-    />
+  <div v-if="page">
+    <UContainer>
+      <UPageHeader
+        v-bind="page"
+        class="py-[50px]"
+      />
 
-    <UPageBody>
-      <UBlogPosts>
-        <UBlogPost
-          v-for="(post, index) in posts"
-          :key="index"
-          :to="post.path"
-          :title="post.title"
-          :description="post.description"
-          :image="post.image"
-          :date="new Date(post.date).toLocaleDateString('en', { year: 'numeric', month: 'short', day: 'numeric' })"
-          :authors="post.authors"
-          :badge="post.badge"
-          :orientation="index === 0 ? 'horizontal' : 'vertical'"
-          :class="[index === 0 && 'col-span-full']"
-          variant="naked"
-          :ui="{
-            description: 'line-clamp-2'
-          }"
-        />
-      </UBlogPosts>
-    </UPageBody>
-  </UContainer>
+      <UPageBody>
+        <UBlogPosts>
+          <UBlogPost
+            v-for="(post, index) in posts"
+            :key="index"
+            :to="post.path"
+            :title="post.title"
+            :description="post.description"
+            :image="post.image"
+            :date="new Date(post.date).toLocaleDateString('en', { year: 'numeric', month: 'short', day: 'numeric' })"
+            :authors="post.authors"
+            :badge="post.badge"
+            :orientation="index === 0 ? 'horizontal' : 'vertical'"
+            :class="[index === 0 && 'col-span-full']"
+            variant="naked"
+            :ui="{
+              description: 'line-clamp-2'
+            }"
+          />
+        </UBlogPosts>
+      </UPageBody>
+    </UContainer>
+  </div>
 </template>
diff --git a/app/pages/changelog/index.vue b/app/pages/changelog/index.vue
index 6883cbd0..d990746a 100644
--- a/app/pages/changelog/index.vue
+++ b/app/pages/changelog/index.vue
@@ -18,24 +18,26 @@ defineOgImageComponent('Saas')
 </script>
 
 <template>
-  <UContainer>
-    <UPageHeader
-      v-bind="page"
-      class="py-[50px]"
-    />
+  <div v-if="page">
+    <UContainer>
+      <UPageHeader
+        v-bind="page"
+        class="py-[50px]"
+      />
 
-    <UPageBody>
-      <UChangelogVersions>
-        <UChangelogVersion
-          v-for="(version, index) in versions"
-          :key="index"
-          v-bind="version"
-        >
-          <template #body>
-            <ContentRenderer :value="version.body" />
-          </template>
-        </UChangelogVersion>
-      </UChangelogVersions>
-    </UPageBody>
-  </UContainer>
+      <UPageBody>
+        <UChangelogVersions>
+          <UChangelogVersion
+            v-for="(version, index) in versions"
+            :key="index"
+            v-bind="version"
+          >
+            <template #body>
+              <ContentRenderer :value="version.body" />
+            </template>
+          </UChangelogVersion>
+        </UChangelogVersions>
+      </UPageBody>
+    </UContainer>
+  </div>
 </template>
diff --git a/app/pages/docs.vue b/app/pages/docs.vue
new file mode 100644
index 00000000..b81c1602
--- /dev/null
+++ b/app/pages/docs.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import type { ContentNavigationItem } from '@nuxt/content'
+
+const navigation = inject<Ref<ContentNavigationItem[]>>('navigation')
+</script>
+
+<template>
+  <div>
+    <UContainer>
+      <UPage>
+        <template #left>
+          <UPageAside>
+            <template #top>
+              <UContentSearchButton :collapsed="false" />
+            </template>
+
+            <UContentNavigation
+              :navigation="navigation"
+              highlight
+            />
+          </UPageAside>
+        </template>
+
+        <NuxtPage />
+      </UPage>
+    </UContainer>
+  </div>
+</template>
diff --git a/app/pages/docs/[...slug].vue b/app/pages/docs/[...slug].vue
index 31c86d25..645512bb 100644
--- a/app/pages/docs/[...slug].vue
+++ b/app/pages/docs/[...slug].vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 definePageMeta({
-  layout: 'docs'
+  layout: 'default'
 })
 
 const route = useRoute()
@@ -30,28 +30,30 @@ defineOgImageComponent('Saas')
 </script>
 
 <template>
-  <UPage v-if="page">
-    <UPageHeader
-      :title="page.title"
-      :description="page.description"
-    />
-
-    <UPageBody>
-      <ContentRenderer
-        v-if="page.body"
-        :value="page"
+  <div v-if="page">
+    <UPage>
+      <UPageHeader
+        :title="page.title"
+        :description="page.description"
       />
 
-      <USeparator v-if="surround?.length" />
-
-      <UContentSurround :surround="surround" />
-    </UPageBody>
-
-    <template
-      v-if="page?.body?.toc?.links?.length"
-      #right
-    >
-      <UContentToc :links="page.body.toc.links" />
-    </template>
-  </UPage>
+      <UPageBody>
+        <ContentRenderer
+          v-if="page.body"
+          :value="page"
+        />
+
+        <USeparator v-if="surround?.length" />
+
+        <UContentSurround :surround="surround" />
+      </UPageBody>
+
+      <template
+        v-if="page?.body?.toc?.links?.length"
+        #right
+      >
+        <UContentToc :links="page.body.toc.links" />
+      </template>
+    </UPage>
+  </div>
 </template>
diff --git a/app/pages/login.vue b/app/pages/login.vue
index d1df7b49..29a3ef84 100644
--- a/app/pages/login.vue
+++ b/app/pages/login.vue
@@ -57,34 +57,36 @@ function onSubmit(payload: FormSubmitEvent<Schema>) {
 </script>
 
 <template>
-  <UAuthForm
-    :fields="fields"
-    :schema="schema"
-    :providers="providers"
-    title="Welcome back"
-    icon="i-lucide-lock"
-    @submit="onSubmit"
-  >
-    <template #description>
-      Don't have an account? <ULink
-        to="/signup"
-        class="text-primary font-medium"
-      >Sign up</ULink>.
-    </template>
+  <div>
+    <UAuthForm
+      :fields="fields"
+      :schema="schema"
+      :providers="providers"
+      title="Welcome back"
+      icon="i-lucide-lock"
+      @submit="onSubmit"
+    >
+      <template #description>
+        Don't have an account? <ULink
+          to="/signup"
+          class="text-primary font-medium"
+        >Sign up</ULink>.
+      </template>
 
-    <template #password-hint>
-      <ULink
-        to="/"
-        class="text-primary font-medium"
-        tabindex="-1"
-      >Forgot password?</ULink>
-    </template>
+      <template #password-hint>
+        <ULink
+          to="/"
+          class="text-primary font-medium"
+          tabindex="-1"
+        >Forgot password?</ULink>
+      </template>
 
-    <template #footer>
-      By signing in, you agree to our <ULink
-        to="/"
-        class="text-primary font-medium"
-      >Terms of Service</ULink>.
-    </template>
-  </UAuthForm>
+      <template #footer>
+        By signing in, you agree to our <ULink
+          to="/"
+          class="text-primary font-medium"
+        >Terms of Service</ULink>.
+      </template>
+    </UAuthForm>
+  </div>
 </template>
diff --git a/app/pages/signup.vue b/app/pages/signup.vue
index 16da4879..9899793e 100644
--- a/app/pages/signup.vue
+++ b/app/pages/signup.vue
@@ -58,26 +58,28 @@ function onSubmit(payload: FormSubmitEvent<Schema>) {
 </script>
 
 <template>
-  <UAuthForm
-    :fields="fields"
-    :schema="schema"
-    :providers="providers"
-    title="Create an account"
-    :submit="{ label: 'Create account' }"
-    @submit="onSubmit"
-  >
-    <template #description>
-      Already have an account? <ULink
-        to="/login"
-        class="text-primary font-medium"
-      >Login</ULink>.
-    </template>
+  <div>
+    <UAuthForm
+      :fields="fields"
+      :schema="schema"
+      :providers="providers"
+      title="Create an account"
+      :submit="{ label: 'Create account' }"
+      @submit="onSubmit"
+    >
+      <template #description>
+        Already have an account? <ULink
+          to="/login"
+          class="text-primary font-medium"
+        >Login</ULink>.
+      </template>
 
-    <template #footer>
-      By signing up, you agree to our <ULink
-        to="/"
-        class="text-primary font-medium"
-      >Terms of Service</ULink>.
-    </template>
-  </UAuthForm>
+      <template #footer>
+        By signing up, you agree to our <ULink
+          to="/"
+          class="text-primary font-medium"
+        >Terms of Service</ULink>.
+      </template>
+    </UAuthForm>
+  </div>
 </template>
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 7833c6d0..deedb0f5 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -19,6 +19,17 @@ export default defineNuxtConfig({
     '/docs': { redirect: '/docs/getting-started', prerender: false }
   },
 
+  app: {
+    pageTransition: {
+      name: 'blur',
+      mode: 'out-in'
+    },
+    layoutTransition: {
+      name: 'blur',
+      mode: 'out-in'
+    }
+  },
+
   compatibilityDate: '2024-07-11',
 
   nitro: {