kheiner · kheiner · Apr 12, 2026 · Apr 10, 2026 · Apr 10, 2026
diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
@@ -42,35 +42,38 @@ export default defineConfig({
         text: 'API Reference',
         items: [
           {
-            text: 'Configuration', link: 'index',
+            text: 'Configuration',
+            link: 'index',
             collapsed: true,
             base: '/api/configuration/',
             items: [
               { text: 'Module Options', link: 'module' },
               { text: 'Environment Variables', link: 'env' },
               { text: 'Directus Server Configuration', link: 'server' },
-            ]
+            ],
           },
           {
-            text: 'Composables', link: 'index',
+            text: 'Composables',
+            link: 'index',
             collapsed: true,
             base: '/api/composables/',
             items: [
               { text: 'Authentication', link: 'auth' },
               { text: 'Client', link: 'client' },
               { text: 'File', link: 'file' },
               { text: 'Storage', link: 'storage' },
-            ]
+            ],
           },
           {
-            text: 'Components', link: 'index',
+            text: 'Components',
+            link: 'index',
             collapsed: true,
             base: '/api/components/',
             items: [
               { text: 'Visual Editor', link: 'visual-editor' },
               { text: 'Edit Button', link: 'edit-button' },
               { text: 'Add Button', link: 'add-button' },
-            ]
+            ],
           },
         ],
       },
@@ -80,13 +83,13 @@ export default defineConfig({
     ],
     editLink: {
       pattern: 'https://github.com/rolleyio/nuxt-directus-sdk/edit/next/docs/:path',
-      text: 'Edit this page on GitHub'
+      text: 'Edit this page on GitHub',
     },
     lastUpdated: {
       formatOptions: {
         dateStyle: 'medium',
-      }
+      },
     },
-    externalLinkIcon: true
+    externalLinkIcon: true,
   },
 })
diff --git a/docs/api/components/edit-button.md b/docs/api/components/edit-button.md
@@ -84,4 +84,4 @@ The button has scoped default styles. Override using the default slot for custom
   border-radius: 8px;
   z-index: 2147483647;
 }
-```
+```
diff --git a/docs/api/components/index.md b/docs/api/components/index.md
@@ -25,8 +25,7 @@ const route = useRoute()
 const directus = useDirectus()
 
 const { data: article } = await useAsyncData('article', () =>
-  directus.request(readItem('articles', route.params.id))
-)
+  directus.request(readItem('articles', route.params.id)))
 </script>
 
 <template>
@@ -48,7 +47,7 @@ const { data: article } = await useAsyncData('article', () =>
       <img
         v-if="article.featured_image"
         :src="getDirectusFileUrl(article.featured_image, { width: 1200 })"
-      />
+      >
     </DirectusVisualEditor>
 
     <DirectusVisualEditor
@@ -71,8 +70,7 @@ const { data: article } = await useAsyncData('article', () =>
 const { data: page } = await useAsyncData('page', () =>
   directus.request(readItem('pages', route.params.id, {
     fields: ['*', { blocks: ['*'] }]
-  }))
-)
+  })))
 </script>
 
 <template>

diff --git a/docs/api/components/visual-editor.md b/docs/api/components/visual-editor.md
@@ -15,8 +15,7 @@ The component only adds attributes when the visual editor detects it is inside a
 const directus = useDirectus()
 
 const { data: article } = await useAsyncData('article', () =>
-  directus.request(readItem('articles', route.params.id))
-)
+  directus.request(readItem('articles', route.params.id)))
 </script>
 
 <template>
@@ -151,8 +150,7 @@ When content is saved in the Directus editor, `refreshNuxtData()` is called auto
 <script setup>
 // Good - reactive data that updates on save
 const { data: article } = await useAsyncData('article', () =>
-  directus.request(readItem('articles', id))
-)
+  directus.request(readItem('articles', id)))
 
 // Avoid - static data won't update after edits
 const article = await directus.request(readItem('articles', id))
@@ -166,14 +164,17 @@ The component is fully typed with generics:
 ```vue
 <script setup lang="ts">
 // TypeScript will enforce correct collection names and field names
-<DirectusVisualEditor
-  collection="articles"  // Must match a key in DirectusSchema
-  :item="article.id"
-  fields="title"         // Must match a field in the collection
->
-  <h1>{{ article.title }}</h1>
-</DirectusVisualEditor>
 </script>
+
+<template>
+  <DirectusVisualEditor
+    key collection="articles"
+    :item="article.id"
+    fields="title"
+  >
+    <h1>{{ article.title }}</h1>
+  </DirectusVisualEditor>
+</template>
 ```
 
 **Props type definition:**
@@ -201,4 +202,4 @@ export default defineNuxtConfig({
 
 When disabled, the component becomes a simple pass-through wrapper with no functionality.
 
----
+---
diff --git a/docs/api/composables/auth.md b/docs/api/composables/auth.md
@@ -297,8 +297,9 @@ console.log(user.value?.first_name)
 watch(user, (newUser) => {
   if (newUser) {
     console.log('User logged in:', newUser.email)
-  } else {
+  }
+  else {
     console.log('User logged out')
   }
 })
-```
+```
diff --git a/docs/api/composables/client.md b/docs/api/composables/client.md
@@ -39,8 +39,7 @@ const { data: articles } = await useAsyncData('articles', () =>
     filter: { status: { _eq: 'published' } },
     sort: ['-date_created'],
     limit: 10,
-  }))
-)
+  })))
 ```
 
 **Common Operations:**
@@ -169,4 +168,4 @@ const directusVisualEditor = useDirectusVisualEditor()
     Editing Mode Active
   </div>
 </template>
-```
+```
diff --git a/docs/api/composables/file.md b/docs/api/composables/file.md
@@ -96,15 +96,15 @@ const downloadUrl = getDirectusFileUrl(file, {
 
 ```typescript
 interface DirectusFileOptions {
-  filename?: string              // Custom filename for downloads
-  download?: boolean             // Force download
-  width?: number                 // Resize width
-  height?: number                // Resize height
-  quality?: number               // Image quality (1-100)
+  filename?: string // Custom filename for downloads
+  download?: boolean // Force download
+  width?: number // Resize width
+  height?: number // Resize height
+  quality?: number // Image quality (1-100)
   fit?: 'cover' | 'contain' | 'inside' | 'outside'
   format?: 'jpg' | 'png' | 'webp' | 'tiff' | 'avif'
-  withoutEnlargement?: boolean   // Prevent upscaling
-  key?: string                   // Access key for private files
+  withoutEnlargement?: boolean // Prevent upscaling
+  key?: string // Access key for private files
 }
 ```
 
@@ -134,4 +134,4 @@ const thumb = getDirectusFileUrl(file, {
   format: 'webp',
   withoutEnlargement: true,
 })
-```
+```
diff --git a/docs/api/composables/index.md b/docs/api/composables/index.md
@@ -32,46 +32,19 @@ const url = getDirectusFileUrl(file, {
 
 The module auto-imports commonly used Directus SDK functions:
 
-```typescript
-// Items
-readItems, readItem, createItem, createItems,
-updateItem, updateItems, deleteItem, deleteItems
-
-// Singletons
-readSingleton, updateSingleton
-
-// Files
-readFile, readFiles, updateFile, updateFiles,
-deleteFile, deleteFiles, uploadFiles
-
-// Users
-readUser, readUsers, createUser, createUsers,
-updateUser, updateUsers, deleteUser, deleteUsers,
-readMe, updateMe
-
-// Collections
-readCollection, readCollections, createCollection,
-updateCollection, deleteCollection
-
-// Fields
-readField, readFields, readFieldsByCollection,
-createField, updateField, deleteField
-
-// Folders
-readFolder, readFolders, updateFolder, updateFolders
-
-// Comments
-createComment, updateComment, deleteComment
-
-// Activities
-readActivity, readActivities
-
-// Auth
-readProviders
-
-// Utilities
-aggregate, generateUid, withToken, importFile
-```
+|Category|AutoImported Functions|
+|---|---|
+| <Badge>Items</Badge> | `createItem()`, `createItems()`, `readItem()`, `readItems()`, `updateItem()`, `updateItems()`, `deleteItem()`, `deleteItems()` |
+| <Badge>Singletons</Badge> | `readSingleton()`, `updateSingleton()` |
+| <Badge>Files</Badge> | `uploadFiles()`, `readFile()`, `readFiles()`, `updateFile()`, `updateFiles()`, `deleteFile()`, `deleteFiles()` |
+| <Badge>Users</Badge> | `createUser()`, `createUsers()`, `readMe()`, `readUser()`, `readUsers()`, `updateMe()`, `updateUser()`, `updateUsers()`, `deleteUser()`, `deleteUsers()` |
+| <Badge>Collections</Badge> | `createCollection()`, `readCollection()`, `readCollections()`, `updateCollection()`, `deleteCollection()` |
+| <Badge>Fields</Badge> | `createField()`, `readField()`, `readFields()`, `readFieldsByCollection()`, `updateField()`, `deleteField()` |
+| <Badge>Folders</Badge> | `readFolder()`, `readFolders()`, `updateFolder()`, `updateFolders()` |
+| <Badge>Comments</Badge> | `createComment()`, `updateComment()`, `deleteComment()` |
+| <Badge>Activities</Badge> | `readActivity()`, `readActivities()` |
+| <Badge>Auth</Badge> | `readProviders()` |
+| <Badge>Utilities</Badge> | `aggregate()`, `generateUid()`, `importFile()`, `withToken()` |
 
 **Usage:**
 
@@ -107,7 +80,6 @@ const created = await directus.request(createItem('articles', {
 ## Storage Composables
 <!--@include: ./storage.md{7,}-->
 
-
 ## See Also
 
 - [Server-Side Utilities](/guide/server-side)

diff --git a/docs/api/composables/storage.md b/docs/api/composables/storage.md
@@ -23,4 +23,4 @@ await storage.set('directus_session_token', 'token-value')
 await storage.delete('directus_session_token')
 ```
 
-**Note:** This composable is mainly used internally for session management. You typically won't need to use it directly.
+**Note:** This composable is mainly used internally for session management. You typically won't need to use it directly.
diff --git a/docs/api/configuration/env.md b/docs/api/configuration/env.md
@@ -4,7 +4,7 @@ outline: deep
 
 # Environment Variables
 
-### .env.development
+### .env for development
 
 ```dotenv
 # Required
@@ -14,7 +14,7 @@ DIRECTUS_URL=http://localhost:8055
 DIRECTUS_ADMIN_TOKEN=your-admin-token-here
 ```
 
-### .env.production
+### .env for production
 
 For production, set environment variables in your hosting platform:
 
@@ -40,11 +40,13 @@ ENV DIRECTUS_ADMIN_TOKEN=your-token
 ::: tip Docker with split URLs
 When using Docker Compose, you can use the object URL form in `nuxt.config.ts` to route SSR requests through the internal Docker network:
 ```typescript
-directus: {
-  url: {
-    client: 'https://cms.example.com',
-    server: 'http://directus:8055', // Docker service name
-  },
-}
+export default defineNuxtConfig({
+  directus: {
+    url: {
+      client: 'https://cms.example.com',
+      server: 'http://directus:8055', // Docker service name
+    },
+  }
+})
 ```
-:::
+:::
diff --git a/docs/api/configuration/index.md b/docs/api/configuration/index.md
@@ -9,7 +9,6 @@ Complete reference for all nuxt-directus-sdk configuration options.
 ## Module Options
 <!--@include: ./module.md{7,}-->
 
-
 ## Environment Variables
 <!--@include: ./env.md{7,}-->
 

diff --git a/docs/api/configuration/module.md b/docs/api/configuration/module.md
@@ -16,8 +16,8 @@ export default defineNuxtConfig({
 })
 ```
 
->[!NOTE]
->::: details Module options automatically loaded into runtime config. `adminToken` is automatically excluded from public runtime config for security.
+>[!NOTE] Module options are automatically loaded into Nuxt RuntimeConfig().
+>::: details  `adminToken` is automatically excluded from public runtime config for security.
 >
 >
 >```typescript
@@ -30,7 +30,6 @@ export default defineNuxtConfig({
 >console.log(config.directus.adminToken)
 >```
 
-
 ::: details All Configuration Options
 
 ```typescript
@@ -101,8 +100,8 @@ export default defineNuxtConfig({
 
     // Or split URLs for Docker/K8s
     url: {
-      client: 'https://cms.example.com',    // Browser requests
-      server: 'http://directus:8055',        // SSR / server-side requests
+      client: 'https://cms.example.com', // Browser requests
+      server: 'http://directus:8055', // SSR / server-side requests
     },
   },
 })
@@ -166,7 +165,7 @@ export default defineNuxtConfig({
     // Or detailed configuration
     devProxy: {
       enabled: true,
-      path: '/directus',      // HTTP proxy mount path
+      path: '/directus', // HTTP proxy mount path
       wsPath: '/directus-ws', // WebSocket proxy path (optional)
     },
   },
@@ -529,9 +528,9 @@ export default defineNuxtConfig({
   directus: {
     auth: {
       redirect: {
-        home: '/',                  // After login
-        login: '/auth/login',    // When not authenticated
-        logout: '/',                // After logout
+        home: '/', // After login
+        login: '/auth/login', // When not authenticated
+        logout: '/', // After logout
       },
     },
   },
@@ -557,4 +556,4 @@ Where to redirect when authentication is required.
 - **Type:** `string`
 - **Default:** `'/'`
 
-Where to redirect after logout.
+Where to redirect after logout.
diff --git a/docs/api/configuration/server.md b/docs/api/configuration/server.md
@@ -50,4 +50,4 @@ SESSION_COOKIE_DOMAIN=.example.com  # Shared parent domain
 SESSION_COOKIE_SECURE=true
 SESSION_COOKIE_SAME_SITE=None  # Required for cross-domain
 CORS_ORIGIN=https://app.example.com
-```
+```
-Original file line number
+Diff line change
@@ Expand Up @@
       border-radius: 8px;
       z-index: 2147483647;
     }
-    ```
+    ```