feat(dev): enable studio in development mode without auth

playground/docus/nuxt.config.ts

@@ -13,6 +13,7 @@ export default defineNuxtConfig({
   },
   compatibilityDate: '2025-08-26',
   studio: {
+    dev: false,
     route: '/admin',
     repository: {
       owner: 'nuxt-content',

src/app/src/components/AppFooter.vue

@@ -2,9 +2,10 @@
 import { computed } from 'vue'
 import { useStudio } from '../composables/useStudio'
 import { useStudioState } from '../composables/useStudioState'
+import type { DropdownMenuItem } from '@nuxt/ui'
 
 const { ui, host, git } = useStudio()
-const { preferences, updatePreference, unsetActiveLocation } = useStudioState()
+const { devMode, preferences, updatePreference, unsetActiveLocation } = useStudioState()
 const user = host.user.get()
 
 // const showTechnicalMode = computed({
@@ -16,19 +17,19 @@ const user = host.user.get()
 
 const repositoryUrl = computed(() => git.getBranchUrl())
 const userMenuItems = computed(() => [
-  [
-  // [{
-  //   slot: 'view-mode' as const,
-  // }
-    repositoryUrl.value
-      ? {
+  repositoryUrl.value
+    ? [
+        // [{
+        //   slot: 'view-mode' as const,
+        // }
+        {
           label: `${host.repository.owner}/${host.repository.repo}`,
           icon: 'i-simple-icons:github',
           to: repositoryUrl.value,
           target: '_blank',
-        }
-      : undefined,
-  ].filter(Boolean),
+        },
+      ]
+    : undefined,
   [{
     label: 'Sign out',
     icon: 'i-lucide-log-out',
@@ -38,7 +39,7 @@ const userMenuItems = computed(() => [
       })
     },
   }],
-])
+].filter(Boolean) as DropdownMenuItem[][])
 
 function closeStudio() {
   unsetActiveLocation()
@@ -50,7 +51,14 @@ function closeStudio() {
   <div
     class="bg-muted/50 border-default border-t-[0.5px] flex items-center justify-between gap-1.5 px-2 py-2"
   >
+    <span
+      v-if="devMode"
+      class="ml-2 text-xs text-muted"
+    >
+      Using local filesystem
+    </span>
     <UDropdownMenu
+      v-else
       :portal="false"
       :items="userMenuItems"
       :ui="{ content: 'w-full' }"

src/app/src/components/header/HeaderMain.vue

@@ -8,7 +8,7 @@ import { useStudioState } from '../../composables/useStudioState'
 const router = useRouter()
 const route = useRoute()
 const { context } = useStudio()
-const { setLocation } = useStudioState()
+const { setLocation, devMode } = useStudioState()
 
 const items = [
   {
@@ -52,6 +52,7 @@ const current = computed({
     />
 
     <UButton
+      v-if="!devMode"
       label="Review"
       color="neutral"
       :variant="context.draftCount.value > 0 ? 'solid' : 'soft'"
@@ -66,7 +67,7 @@ const current = computed({
       >
         <UBadge
           :label="context.draftCount.value.toString()"
-          class="bg-[var(--ui-color-neutral-400)]"
+          class="bg-neutral-400"
           size="xs"
           variant="soft"
         />

src/app/src/composables/useDraftBase.ts

@@ -6,6 +6,7 @@ import { checkConflict, findDescendantsFromFsPath, getDraftStatus } from '../uti
 import type { useGit } from './useGit'
 import { useHooks } from './useHooks'
 import { ref } from 'vue'
+import { useStudioState } from './useStudioState'
 
 export function useDraftBase<T extends DatabaseItem | MediaItem>(
   type: 'media' | 'document',
@@ -22,6 +23,7 @@ export function useDraftBase<T extends DatabaseItem | MediaItem>(
   const hookName = `studio:draft:${type}:updated` as const
 
   const hooks = useHooks()
+  const { devMode } = useStudioState()
 
   async function get(fsPath: string): Promise<DraftItem<T> | undefined> {
     return list.value.find(item => item.fsPath === fsPath) as DraftItem<T>
@@ -38,7 +40,7 @@ export function useDraftBase<T extends DatabaseItem | MediaItem>(
     const draftItem: DraftItem<T> = {
       fsPath,
       githubFile,
-      status: getDraftStatus(item, original),
+      status: getDraftStatus(item, original, devMode.value),
       modified: item,
     }
 
@@ -70,40 +72,45 @@ export function useDraftBase<T extends DatabaseItem | MediaItem>(
       await storage.removeItem(fsPath)
       await hostDb.delete(fsPath)
 
-      let deleteDraftItem: DraftItem<T> | null = null
-      if (existingDraftItem) {
-        if (existingDraftItem.status === DraftStatus.Deleted) return
+      if (!devMode.value) {
+        let deleteDraftItem: DraftItem<T> | null = null
+        if (existingDraftItem) {
+          if (existingDraftItem.status === DraftStatus.Deleted) return
 
-        if (existingDraftItem.status === DraftStatus.Created) {
-          list.value = list.value.filter(item => item.fsPath !== fsPath)
+          if (existingDraftItem.status === DraftStatus.Created) {
+            list.value = list.value.filter(item => item.fsPath !== fsPath)
+          }
+          else {
+          // TODO: check if gh file has been updated
+            const githubFile = await git.fetchFile(joinURL('content', fsPath), { cached: true }) as GithubFile
+
+            deleteDraftItem = {
+              fsPath: existingDraftItem.fsPath,
+              status: DraftStatus.Deleted,
+              original: originalDbItem,
+              githubFile,
+            }
+
+            list.value = list.value.map(item => item.fsPath === fsPath ? deleteDraftItem! : item) as DraftItem<T>[]
+          }
         }
         else {
+        // TODO: check if gh file has been updated
+          const githubFile = await git.fetchFile(joinURL('content', fsPath), { cached: true }) as GithubFile
+
           deleteDraftItem = {
-            fsPath: existingDraftItem.fsPath,
+            fsPath,
             status: DraftStatus.Deleted,
-            original: existingDraftItem.original,
-            githubFile: existingDraftItem.githubFile,
+            original: originalDbItem,
+            githubFile,
           }
 
-          list.value = list.value.map(item => item.fsPath === fsPath ? deleteDraftItem! : item) as DraftItem<T>[]
+          list.value.push(deleteDraftItem)
         }
-      }
-      else {
-      // TODO: check if gh file has been updated
-        const githubFile = await git.fetchFile(joinURL('content', fsPath), { cached: true }) as GithubFile
-
-        deleteDraftItem = {
-          fsPath,
-          status: DraftStatus.Deleted,
-          original: originalDbItem,
-          githubFile,
-        }
-
-        list.value.push(deleteDraftItem)
-      }
 
-      if (deleteDraftItem) {
-        await storage.setItem(fsPath, deleteDraftItem)
+        if (deleteDraftItem) {
+          await storage.setItem(fsPath, deleteDraftItem)
+        }
       }
 
       if (rerender) {
@@ -135,7 +142,7 @@ export function useDraftBase<T extends DatabaseItem | MediaItem>(
         // @ts-expect-error upsert type is wrong, second param should be DatabaseItem | MediaItem
         await hostDb.upsert(draftItem.fsPath, existingItem.original)
         existingItem.modified = existingItem.original
-        existingItem.status = getDraftStatus(existingItem.modified, existingItem.original)
+        existingItem.status = getDraftStatus(existingItem.modified, existingItem.original, devMode.value)
         await storage.setItem(draftItem.fsPath, existingItem)
       }
     }

src/app/src/composables/useDraftDocuments.ts

@@ -9,8 +9,10 @@ import { joinURL } from 'ufo'
 import { documentStorage as storage } from '../utils/storage'
 import { getFileExtension } from '../utils/file'
 import { useDraftBase } from './useDraftBase'
+import { useStudioState } from './useStudioState'
 
 export const useDraftDocuments = createSharedComposable((host: StudioHost, git: ReturnType<typeof useGit>) => {
+  const { devMode } = useStudioState()
   const {
     isLoading,
     list,
@@ -34,7 +36,7 @@ export const useDraftDocuments = createSharedComposable((host: StudioHost, git:
     }
 
     const oldStatus = existingItem.status
-    existingItem.status = getDraftStatus(document, existingItem.original)
+    existingItem.status = getDraftStatus(document, existingItem.original, devMode.value)
     existingItem.modified = document
 
     await storage.setItem(fsPath, existingItem)