chore: merge main into release/v0.1.4

Author: onmax

README.md

@@ -4,7 +4,7 @@ Nuxt module for [Better Auth](https://better-auth.com) with Nuxt-native route pr
 
 ## Who this is for
 
-Use this module if you want Better Auth in a Nuxt 4 app and you want the Nuxt-specific pieces handled for you:
+Use this module if you want Better Auth in a Nuxt app and you want the Nuxt-specific pieces handled for you:
 
 - `useUserSession()` for reactive auth state
 - `requireUserSession(event)` and related server helpers
@@ -14,7 +14,7 @@ Use this module if you want Better Auth in a Nuxt 4 app and you want the Nuxt-sp
 
 ## Install the module
 
-For the fastest path in a Nuxt 4 app:
+For the fastest path in a Nuxt app:
 
 ```bash
 npx nuxi module add @nuxtjs/better-auth

build.config.ts

@@ -1,5 +1,5 @@
 import { defineBuildConfig } from 'unbuild'
 
 export default defineBuildConfig({
-  externals: ['consola', '@better-auth/cli', '@better-auth/cli/api', 'drizzle-orm/utils'],
+  externals: ['consola', 'auth', 'auth/api'],
 })

docs/app/app.config.ts

@@ -28,31 +28,8 @@ export default defineAppConfig({
         },
       },
     },
-    page: {
-      slots: {
-        root: 'flex flex-col lg:flex-row lg:gap-8 px-4 sm:px-6 lg:px-8 xl:px-12',
-        left: 'hidden',
-        center: 'flex-1 min-w-0 max-w-[var(--fd-content-width,860px)] mx-auto',
-        right: 'hidden xl:block w-[var(--fd-toc-width,268px)] shrink-0',
-      },
-    },
     pageBody: {
       base: 'mt-8 pb-24 space-y-12',
     },
-    pageAside: {
-      slots: {
-        root: 'sticky top-[var(--ui-header-height)] max-h-[calc(100vh-var(--ui-header-height))] overflow-y-auto py-8',
-      },
-    },
-    contentToc: {
-      slots: {
-        root: '',
-        container: '',
-        header: 'text-sm font-semibold mb-3 text-[var(--ui-text-highlighted)]',
-        links: 'space-y-1',
-        link: 'text-sm block py-1.5 text-[var(--ui-text-muted)] hover:text-[var(--ui-text)] transition-colors',
-        linkActive: 'text-[var(--ui-text-highlighted)]',
-      },
-    },
   },
 })

docs/app/app.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import type { ContentNavigationItem, PageCollections } from '@nuxt/content'
-import { SpeedInsights } from '@vercel/speed-insights/nuxt'
 
 const route = useRoute()
 const { locale, isEnabled } = useDocusI18n()
@@ -33,12 +32,5 @@ provide('navigation', navigation)
     </ClientOnly>
 
     <UToaster />
-    <SpeedInsights />
   </div>
 </template>
-
-<style>
-.app-root {
-  --header-height: var(--ui-header-height, 56px);
-}
-</style>

docs/app/assets/css/main.css

@@ -6,15 +6,26 @@
 :root {
   --ui-radius: 0.125rem;
   --ui-bg: var(--color-white);
-  --fd-sidebar-width: 268px;
-  --fd-toc-width: 268px;
-  --fd-content-width: 860px;
+  --header-height: 3.5rem;
+  /* Mirror better-auth/docs/app/globals.css */
+  --fd-sidebar-width: 280px;
+  --fd-toc-width: 0px;
+  --fd-page-width: 900px;
+  --fd-layout-width: 100%;
 }
 
+@media (min-width: 1024px) {
+  :root {
+    --fd-sidebar-width: 300px;
+    /* same as better-auth: min(100vw - sidebar, 1200px) */
+    --fd-layout-width: min(calc(100vw - var(--fd-sidebar-width)), 1200px);
+  }
+}
+
+/* 80rem — better-auth enables side TOC here */
 @media (min-width: 1280px) {
   :root {
-    --fd-sidebar-width: 286px;
-    --fd-toc-width: 286px;
+    --fd-toc-width: 280px;
   }
 }
 
@@ -132,3 +143,123 @@ pre, code {
 .hero-code > div > div {
   margin: 0 !important;
 }
+
+/* Native scrollbar: kill light Windows track "glow" on dark bg */
+html {
+  scrollbar-width: thin;
+  scrollbar-color: color-mix(in srgb, var(--ui-border) 90%, transparent) transparent;
+}
+
+html::-webkit-scrollbar,
+body::-webkit-scrollbar,
+.docs-main::-webkit-scrollbar,
+.docs-main *::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+
+html::-webkit-scrollbar-track,
+body::-webkit-scrollbar-track,
+.docs-main::-webkit-scrollbar-track,
+.docs-main *::-webkit-scrollbar-track,
+html::-webkit-scrollbar-corner,
+body::-webkit-scrollbar-corner {
+  background: transparent;
+}
+
+html::-webkit-scrollbar-thumb,
+body::-webkit-scrollbar-thumb,
+.docs-main::-webkit-scrollbar-thumb,
+.docs-main *::-webkit-scrollbar-thumb {
+  background-color: color-mix(in srgb, var(--ui-border) 90%, transparent);
+  border-radius: 9999px;
+  border: 2px solid transparent;
+  background-clip: padding-box;
+}
+
+html::-webkit-scrollbar-thumb:hover,
+body::-webkit-scrollbar-thumb:hover,
+.docs-main::-webkit-scrollbar-thumb:hover,
+.docs-main *::-webkit-scrollbar-thumb:hover {
+  background-color: color-mix(in srgb, var(--ui-text-muted) 70%, transparent);
+}
+
+
+/* Docs page — 1:1 with better-auth fumadocs DocsPage (#nd-page / #nd-article / #nd-toc) */
+.docs-page,
+#nd-page {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) var(--fd-toc-width, 0px);
+  column-gap: 0;
+  width: 100%;
+  max-width: var(--fd-layout-width, 1200px);
+  margin-inline: auto;
+  min-width: 0;
+  padding-inline: 1rem;
+  box-sizing: border-box;
+}
+
+@media (min-width: 640px) {
+  .docs-page,
+  #nd-page {
+    padding-inline: 1.5rem;
+  }
+}
+
+@media (min-width: 1024px) {
+  .docs-page,
+  #nd-page {
+    padding-inline: 2rem;
+  }
+}
+
+@media (min-width: 1280px) {
+  .docs-page,
+  #nd-page {
+    column-gap: 2rem;
+  }
+}
+
+.docs-article,
+#nd-article {
+  min-width: 0;
+  width: 100%;
+  max-width: var(--fd-page-width, 900px);
+}
+
+.docs-toc,
+#nd-toc {
+  display: none;
+  min-width: 0;
+  width: var(--fd-toc-width, 0px);
+  overflow-x: hidden;
+  overflow-y: auto;
+  overscroll-behavior-y: contain;
+  scrollbar-width: none;
+}
+
+.docs-toc::-webkit-scrollbar,
+#nd-toc::-webkit-scrollbar {
+  display: none;
+}
+
+/* 80rem — show side TOC; align top with article title (no extra top padding) */
+@media (min-width: 1280px) {
+  .docs-toc,
+  #nd-toc {
+    display: block;
+    position: sticky;
+    top: calc(var(--header-height, 3.5rem) + 1rem);
+    align-self: start;
+    max-height: calc(100dvh - var(--header-height, 3.5rem) - 2rem);
+    padding-top: 0;
+    padding-bottom: 4rem;
+    padding-inline-start: 2rem;
+  }
+}
+
+/* Docs content: keep wide code blocks inside the page */
+.docs-main :where(pre, table) {
+  max-width: 100%;
+  overflow-x: auto;
+}

docs/app/components/AnnouncementBanner.vue

@@ -1,17 +1,8 @@
 <script setup lang="ts">
 const appConfig = useAppConfig()
 const site = useSiteConfig()
-const route = useRoute()
-const { sidebarOpen, toggle: toggleSidebar } = useDocusSidebar()
 const { open: searchOpen } = useContentSearch()
 
-const isDocsPage = computed(() => route.path.startsWith('/getting-started')
-  || route.path.startsWith('/core-concepts')
-  || route.path.startsWith('/guides')
-  || route.path.startsWith('/integrations')
-  || route.path.startsWith('/api')
-  || route.path.startsWith('/better-auth'))
-
 const navLinks = [
   { name: 'docs', path: '/getting-started' },
   { name: 'demo', path: 'https://demo-nuxt-better-auth.onmax.me', external: true },
@@ -20,7 +11,7 @@ const navLinks = [
 </script>
 
 <template>
-  <UHeader :ui="{ container: 'max-w-full !gap-0 !px-0 h-14 overflow-hidden', root: 'border-b border-[var(--ui-border)] h-14', left: 'gap-0 h-full', right: 'gap-0 h-full', title: 'h-full items-center' }" to="/" :title="appConfig.header?.title || site.name">
+  <UHeader :ui="{ container: 'max-w-full !gap-0 !px-0 h-14 overflow-hidden', root: 'border-b border-[var(--ui-border)] h-14', header: '!px-0 h-14', left: 'gap-0 h-full', right: 'gap-0 h-full lg:pr-4', title: 'h-full items-center' }" to="/" :title="appConfig.header?.title || site.name">
     <template #title>
       <div class="header-logo">
         <!-- Nuxt -->
@@ -70,15 +61,12 @@ const navLinks = [
             class="flex items-center h-full px-5 border-l border-[var(--ui-border)] text-muted transition-colors group-hover:text-[var(--ui-text)]"
             aria-label="GitHub"
           >
-            <UIcon name="i-simple-icons-github" class="size-4" />
+            <UIcon name="i-simple-icons-github" class="size-5" />
           </NuxtLink>
           <div class="absolute bottom-0 left-0 h-0.5 w-0 bg-[var(--ui-text-muted)] opacity-0 transition-all duration-500 group-hover:w-full group-hover:opacity-100" />
         </li>
       </nav>
 
-      <!-- Docs sidebar toggle (mobile) -->
-      <UButton v-if="isDocsPage" color="neutral" variant="ghost" :icon="sidebarOpen ? 'i-lucide-x' : 'i-lucide-panel-left'" class="mobile-header-action lg:hidden" :ui="{ leadingIcon: 'mobile-header-icon' }" @click="toggleSidebar" />
-
       <UButton
         color="neutral"
         variant="ghost"
@@ -102,15 +90,14 @@ const navLinks = [
         color="neutral"
         variant="ghost"
         :icon="open ? 'i-lucide-x' : 'i-lucide-menu'"
-        class="mobile-header-action lg:hidden"
+        class="mobile-header-action mr-4 lg:hidden"
         :ui="{ leadingIcon: 'mobile-header-icon' }"
         @click="toggle"
       />
     </template>
 
     <template #body>
-      <UNavigationMenu :items="[]" orientation="vertical" class="w-full" />
-      <nav class="flex flex-col border-t border-[var(--ui-border)] mt-4 pt-4">
+      <nav class="flex flex-col">
         <NuxtLink
           v-for="link in navLinks"
           :key="link.name"
@@ -135,19 +122,21 @@ const navLinks = [
   padding-inline: 1rem;
   border-right: 1px solid var(--ui-border);
   box-sizing: border-box;
+  flex-shrink: 0;
 }
 
 @media (min-width: 640px) {
   .header-logo {
     gap: 0.75rem;
-    width: var(--fd-sidebar-width, 268px);
+    /* Same token + box model as .docs-sidebar so borders line up */
+    width: var(--fd-sidebar-width, 280px);
     padding-inline: 1.25rem;
   }
 }
 
-@media (min-width: 1280px) {
+@media (min-width: 1024px) {
   .header-logo {
-    width: 286px;
+    width: var(--fd-sidebar-width, 300px);
   }
 }
 
@@ -169,8 +158,8 @@ const navLinks = [
 :deep(.mobile-header-action > span),
 :deep(.mobile-header-action > svg) {
   display: block;
-  width: 1.375rem;
-  height: 1.375rem;
+  width: 1.25rem;
+  height: 1.25rem;
   margin: 0;
   flex: none;
 }

docs/app/components/app/AppHeader.vue

@@ -122,8 +122,7 @@ function getLang(filename: string) {
 </script>
 
 <template>
-  <AnnouncementBanner />
-  <section class="relative w-full flex overflow-x-hidden md:items-end md:justify-center bg-white/96 dark:bg-black/[0.96] antialiased min-h-[40rem] md:min-h-[50rem] lg:min-h-[40rem]">
+  <section class="relative w-full flex overflow-x-clip md:items-end md:justify-center bg-white/96 dark:bg-black/[0.96] antialiased min-h-[40rem] md:min-h-[50rem] lg:min-h-[40rem]">
     <!-- Spotlight Effect -->
     <LandingSpotlight />
 
@@ -283,7 +282,7 @@ function getLang(filename: string) {
                         </UCollapsible>
 
                         <ScrollAreaRoot class="w-full min-w-0 overflow-hidden">
-                          <ScrollAreaViewport class="w-full min-w-0 overflow-x-auto overscroll-x-contain">
+                          <ScrollAreaViewport class="w-full min-w-0 overflow-x-auto overflow-y-hidden overscroll-x-contain">
                             <!-- All files rendered for SSR, animated with CSS -->
                             <div class="relative">
                               <div

docs/app/components/content/landing/LandingHero.vue

@@ -15,6 +15,8 @@ const { open } = useContentSearch()
   align-items: center;
   gap: 0.5rem;
   width: 100%;
+  margin: 0;
+  flex-shrink: 0;
   padding: 0.625rem 1.25rem;
   font-size: 0.875rem;
   color: var(--ui-text-muted);

docs/app/components/docs/DocsSearchButton.vue

@@ -123,6 +123,11 @@ const accordionItems = computed(() =>
   display: flex;
   flex-direction: column;
   min-height: 100%;
+  width: 100%;
+}
+
+.docs-sidebar-nav :deep(> *) {
+  width: 100%;
 }
 
 /* Add top border to first accordion item */