docs: simplify structure, fix UI issues, add custom db guide

Author: onmax

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

@@ -37,7 +37,7 @@ const items = features.items as { title: string, description: string, icon: stri
             <div class="mt-2">
               <p class="mt-2 text-sm text-left text-muted">
                 {{ feature.description }}
-                <NuxtLink class="ml-2 underline" to="/getting-started/installation">
+                <NuxtLink class="underline" to="/getting-started/installation">
                   Learn more
                 </NuxtLink>
               </p>

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

@@ -93,7 +93,7 @@ function getCodeBlock(tab: { name: string, code: string }) {
             <div class="mt-4 flex w-fit flex-col gap-4 font-sans md:flex-row md:justify-center lg:justify-start items-center">
               <NuxtLink
                 to="/getting-started/installation"
-                class="border-2 border-black bg-white px-4 py-1.5 text-sm uppercase text-black shadow-[1px_1px_rgba(0,0,0),2px_2px_rgba(0,0,0),3px_3px_rgba(0,0,0),4px_4px_rgba(0,0,0),5px_5px_0px_0px_rgba(0,0,0)] transition duration-200 md:px-8 hover:shadow-sm dark:border-stone-100 dark:hover:shadow-sm dark:shadow-[1px_1px_rgba(255,255,255),2px_2px_rgba(255,255,255),3px_3px_rgba(255,255,255),4px_4px_rgba(255,255,255),5px_5px_0px_0px_rgba(255,255,255)]"
+                class="border-2 border-black bg-white px-4 py-1.5 text-sm uppercase text-black shadow-[1px_1px_rgba(0,0,0),2px_2px_rgba(0,0,0),3px_3px_rgba(0,0,0),4px_4px_rgba(0,0,0),5px_5px_0px_0px_rgba(0,0,0)] transition duration-200 md:px-8 hover:shadow-sm dark:border-stone-400 dark:hover:shadow-sm dark:shadow-[1px_1px_rgba(120,113,108),2px_2px_rgba(120,113,108),3px_3px_rgba(120,113,108),4px_4px_rgba(120,113,108),5px_5px_0px_0px_rgba(120,113,108)]"
               >
                 Get Started
               </NuxtLink>

docs/app/composables/useSidebarConfig.ts

@@ -22,30 +22,38 @@ export function useSidebarConfig() {
         { title: 'Installation', href: '/getting-started/installation', icon: 'i-solar-download-square-bold' },
         { title: 'Configuration', href: '/getting-started/configuration', icon: 'i-solar-settings-bold' },
         { title: 'Client Setup', href: '/getting-started/client-setup', icon: 'i-solar-monitor-bold' },
-        { title: 'Type Augmentation', href: '/getting-started/type-augmentation', icon: 'i-solar-code-file-bold' },
-        { title: 'Schema Generation', href: '/getting-started/schema-generation', icon: 'i-solar-database-bold' },
       ],
     },
     {
       title: 'Core Concepts',
       icon: 'i-solar-book-bookmark-bold',
       items: [
-        { title: 'How It Works', href: '/core-concepts/how-it-works', icon: 'i-solar-lightbulb-bolt-bold' },
+        { title: 'How It Works', href: '/getting-started/how-it-works', icon: 'i-solar-lightbulb-bolt-bold' },
         { title: 'Server Auth', href: '/core-concepts/server-auth', icon: 'i-solar-server-bold' },
         { title: 'Sessions', href: '/core-concepts/sessions', icon: 'i-solar-key-bold' },
         { title: 'Route Protection', href: '/core-concepts/route-protection', icon: 'i-solar-shield-check-bold' },
-        { title: 'Auto Imports & Aliases', href: '/core-concepts/auto-imports-aliases', icon: 'i-solar-box-bold' },
-        { title: 'Security Caveats', href: '/core-concepts/security-caveats', icon: 'i-solar-danger-triangle-bold' },
+        { title: 'Auto Imports', href: '/core-concepts/auto-imports-aliases', icon: 'i-solar-box-bold' },
+        { title: 'Security', href: '/core-concepts/security-caveats', icon: 'i-solar-danger-triangle-bold' },
       ],
     },
     {
       title: 'Guides',
       icon: 'i-solar-map-bold',
       items: [
-        { title: 'Role-Based Access', href: '/guides/role-based-access', icon: 'i-solar-users-group-rounded-bold' },
-        { title: 'API Protection', href: '/guides/api-protection', icon: 'i-solar-lock-bold' },
+        { title: 'Custom Database', href: '/guides/custom-database', icon: 'i-solar-database-bold' },
         { title: 'Database-less Mode', href: '/guides/database-less-mode', icon: 'i-solar-cloud-bold' },
-        { title: 'Migrate from nuxt-auth-utils', href: '/guides/migrate-from-nuxt-auth-utils', icon: 'i-solar-transfer-horizontal-bold' },
+        { title: 'OAuth Providers', href: '/guides/oauth-providers', icon: 'i-solar-user-id-bold' },
+        { title: 'Role-Based Access', href: '/guides/role-based-access', icon: 'i-solar-users-group-rounded-bold' },
+        { title: 'Two-Factor Auth', href: '/guides/two-factor-auth', icon: 'i-solar-lock-bold' },
+        { title: 'Testing', href: '/guides/testing', icon: 'i-solar-test-tube-bold' },
+      ],
+    },
+    {
+      title: 'Integrations',
+      icon: 'i-solar-plug-circle-bold',
+      items: [
+        { title: 'NuxtHub', href: '/integrations/nuxthub', icon: 'i-simple-icons-nuxtdotjs' },
+        { title: 'DevTools', href: '/integrations/devtools', icon: 'i-solar-tuning-square-bold' },
       ],
     },
     {

docs/app/pages/[[lang]]/[...slug].vue

@@ -55,8 +55,8 @@ const editLink = computed(() => {
       <DocsPageFooter :surround="surround" :edit-link="editLink" />
     </UPageBody>
 
-    <template v-if="page?.body?.toc?.links?.length" #right>
-      <UContentToc highlight :title="appConfig.toc?.title || t('docs.toc')" :links="page.body?.toc?.links">
+    <template #right>
+      <UContentToc v-if="page?.body?.toc?.links?.length" highlight :title="appConfig.toc?.title || t('docs.toc')" :links="page.body?.toc?.links">
         <template #bottom>
           <DocsAsideRightBottom />
         </template>

docs/content/1.getting-started/0.index.md

@@ -49,6 +49,69 @@ Building authentication from scratch is hard. Wiring up Better Auth with Nuxt ma
 
 This module does all of that for you. It's designed to be **drop-in** and **zero-config** where possible.
 
-::callout{icon="i-lucide-rocket" to="/getting-started/quick-start"}
-Ready to start? Follow the **Quick Start**.
+## Quick Start
+
+Get a working login in 5 minutes with NuxtHub (SQLite).
+
+::steps
+
+### Install
+
+::code-group{sync="pm"}
+```bash [pnpm]
+pnpm add @onmax/nuxt-better-auth better-auth @nuxthub/core
+```
+```bash [npm]
+npm install @onmax/nuxt-better-auth better-auth @nuxthub/core
+```
+::
+
+### Configure
+
+```ts [nuxt.config.ts]
+export default defineNuxtConfig({
+  modules: ['@nuxthub/core', '@onmax/nuxt-better-auth'],
+  hub: { db: 'sqlite' },
+})
+```
+
+```ini [.env]
+NUXT_BETTER_AUTH_SECRET="generate-a-32-char-secret"
+```
+
+### Create Config Files
+
+```ts [auth.config.ts]
+import { defineServerAuth } from '@onmax/nuxt-better-auth'
+
+export default defineServerAuth(() => ({
+  emailAndPassword: { enabled: true },
+}))
+```
+
+```ts [client-auth.config.ts]
+import { createAuthClient } from 'better-auth/vue'
+
+export function createAppAuthClient(baseURL: string) {
+  return createAuthClient({ baseURL })
+}
+```
+
+### Run
+
+::code-group{sync="pm"}
+```bash [pnpm]
+pnpm dev
+```
+```bash [npm]
+npm run dev
+```
+::
+
+::
+
+You now have API routes at `/api/auth/*`, a reactive `useUserSession()` composable, and route protection via `definePageMeta`.
+
+::callout{icon="i-lucide-arrow-right" to="/getting-started/installation"}
+Continue to **Installation** for detailed setup options.
 ::

docs/content/1.getting-started/1.quick-start.md

@@ -104,6 +104,10 @@ export function createAppAuthClient(baseURL: string) {
 **Need database persistence?** See [NuxtHub Integration](/integrations/nuxthub) for auto-generated schemas and full database support.
 ::
 
+::callout{icon="i-lucide-hard-drive" to="/guides/custom-database"}
+**Bring your own database?** Use Drizzle, Prisma, or Kysely adapters with any database.
+::
+
 ::callout{icon="i-lucide-arrow-right" to="/getting-started/configuration"}
 Continue to **Configuration** to set up these files.
 ::

docs/content/1.getting-started/2.installation.md

@@ -104,6 +104,28 @@ NUXT_BETTER_AUTH_SECRET="your-super-secret-key"
 NUXT_PUBLIC_SITE_URL="http://localhost:3000"
 ```
 
+## For Module Authors
+
+Other Nuxt modules can extend the authentication configuration:
+
+```ts
+// In your Nuxt module
+export default defineNuxtModule({
+  setup(options, nuxt) {
+    nuxt.hook('better-auth:config:extend', (config) => {
+      config.plugins = [...(config.plugins || []), myPlugin()]
+    })
+  }
+})
+```
+
+Access sessions from server handlers:
+
+```ts
+const { user, session } = await getUserSession(event)
+if (!user) throw createError({ statusCode: 401 })
+```
+
 ::callout{icon="i-lucide-arrow-right" to="/getting-started/client-setup"}
 Next, set up the **Client Configuration**.
 ::

docs/content/1.getting-started/3.configuration.md

@@ -46,6 +46,62 @@ const { user, loggedIn, ready } = useUserSession()
 </template>
 ```
 
-For server-rendered pages that need immediate session access, see the [SSR Sessions Guide](/guides/ssr-sessions).
+## Server-Side Session Access
+
+For pages that need session data during SSR without waiting for hydration:
+
+```vue [pages/dashboard.vue]
+<script setup lang="ts">
+definePageMeta({ auth: 'user' })
+const { user, ready, fetchSession } = useUserSession()
+
+if (import.meta.server) {
+  await fetchSession({ headers: useRequestHeaders(['cookie']) })
+}
+</script>
+
+<template>
+  <BetterAuthState>
+    <template #default>
+      <p v-if="ready">Welcome {{ user?.name }}</p>
+    </template>
+    <template #placeholder>
+      <p>Loading session...</p>
+    </template>
+  </BetterAuthState>
+</template>
+```
+
+Without server-side session initialization, the page briefly shows a loading state before hydration completes.
+
+## Session Refresh
+
+Force refresh the session data:
+
+```vue
+<script setup lang="ts">
+const { fetchSession, ready } = useUserSession()
+</script>
+
+<template>
+  <button :disabled="!ready" @click="fetchSession({ force: true })">
+    Refresh session
+  </button>
+</template>
+```
+
+## Session Lifetime
+
+Configure session duration in your auth config:
+
+```ts [auth.config.ts]
+export default defineServerAuth(() => ({
+  session: {
+    cookie: {
+      maxAge: 60 * 60 * 24 * 7, // 7 days
+    },
+  },
+}))
+```
 
 :read-more{to="/api/components" title="BetterAuthState component"}