chore: Better integration with Nuxt Content

package.json

@@ -30,7 +30,7 @@
   "scripts": {
     "prepack": "nuxt-module-build build src/module; vite build src/app",
     "dev": "npm run dev:prepare && STUDIO_DEV_SERVER=http://localhost:5151 nuxi dev playground/docus",
-    "dev:minimal": "pnpm nuxt dev playground/minimal",
+    "dev:minimal": "npm run dev:prepare && STUDIO_DEV_SERVER=http://localhost:5151 nuxt dev playground/minimal",
     "dev:app": "vite src/app --port 5151",
     "dev:build": "nuxi build playground/docus",
     "dev:prepare": "nuxt-module-build build --stub src/module && nuxt-module-build prepare src/module && nuxi prepare playground/docus",
@@ -43,7 +43,7 @@
     "test:types": "vue-tsc --noEmit && cd playground/docus && vue-tsc --noEmit"
   },
   "devDependencies": {
-    "@nuxt/content": "https://pkg.pr.new/@nuxt/content@22409fe",
+    "@nuxt/content": "https://pkg.pr.new/@nuxt/content@6d63367",
     "@nuxt/eslint-config": "latest",
     "@nuxt/kit": "^4.1.2",
     "@nuxt/module-builder": "latest",
@@ -65,7 +65,7 @@
     "zod": "^4.1.11"
   },
   "resolutions": {
-    "@nuxt/content": "https://pkg.pr.new/@nuxt/content@22409fe",
+    "@nuxt/content": "https://pkg.pr.new/@nuxt/content@6d63367",
     "@nuxtjs/mdc": "https://pkg.pr.new/@nuxtjs/mdc@61af819",
     "remark-mdc": "npm:remark-mdc-edge@3.6.0-29310522.024adeb"
   },

playground/docus/nuxt.config.ts

@@ -10,11 +10,6 @@ export default defineNuxtConfig({
     experimental: {
       sqliteConnector: 'native',
     },
-
-    preview: {
-      dev: true,
-      api: 'http://localhost:3000',
-    },
   },
   compatibilityDate: '2025-08-26',
   contentStudio: {

playground/minimal/nuxt.config.ts

@@ -8,11 +8,6 @@ export default defineNuxtConfig({
     experimental: {
       sqliteConnector: 'native',
     },
-
-    preview: {
-      dev: true,
-      api: 'http://localhost:3000',
-    },
   },
   compatibilityDate: '2025-08-26',
 })

src/app/src/components/AppFooter.vue

@@ -17,7 +17,9 @@ const showTechnicalMode = computed({
 const repositoryUrl = computed(() => {
   switch (host.repository.provider) {
     case 'github':
-      return `https://github.com/${host.repository.owner}/${host.repository.repo}/tree/${host.repository.branch}`
+      return host.repository?.owner
+        ? `https://github.com/${host.repository.owner}/${host.repository.repo}/tree/${host.repository.branch}`
+        : ''
     default:
       return ''
   }
@@ -26,12 +28,15 @@ const repositoryUrl = computed(() => {
 const userMenuItems = computed(() => [
   [{
     slot: 'view-mode' as const,
-  }, {
-    label: `${host.repository.owner}/${host.repository.repo}`,
-    icon: 'i-simple-icons:github',
-    to: repositoryUrl.value,
-    target: '_blank',
-  }],
+  }, repositoryUrl.value
+    ? {
+        label: `${host.repository.owner}/${host.repository.repo}`,
+        icon: 'i-simple-icons:github',
+        to: repositoryUrl.value,
+        target: '_blank',
+      }
+    : undefined,
+  ].filter(Boolean),
   [{
     label: 'Sign out',
     icon: 'i-lucide-log-out',

src/app/src/utils/content.ts

@@ -17,7 +17,7 @@ export const contentFileExtensions = [
   ContentFileExtension.JSON,
 ] as const
 
-const reservedKeys = ['id', 'stem', 'extension', '__hash__', 'path', 'body', 'meta']
+const reservedKeys = ['id', 'stem', 'extension', '__hash__', 'path', 'body', 'meta', 'rawbody']
 
 export function pickReservedKeysFromDocument(document: DatabaseItem) {
   return pick(document, reservedKeys)

src/module/src/module.ts

@@ -100,6 +100,9 @@ export default defineNuxtModule<ModuleOptions>({
       },
     })
     extendViteConfig((config) => {
+      config.define ||= {}
+      config.define['import.meta.preview'] = true
+
       config.optimizeDeps ||= {}
       config.optimizeDeps.include = [
         ...(config.optimizeDeps.include || []),
@@ -170,14 +173,10 @@ export default defineNuxtModule<ModuleOptions>({
       route: '/__nuxt_content/studio/auth/session',
       handler: runtime('./server/routes/auth/session.delete'),
     })
-    addServerHandler({
-      route: '/__nuxt_content/studio',
-      handler: runtime('./server/routes/admin'),
-    })
-    addServerHandler({
-      route: '/sw.js',
-      handler: runtime('./server/routes/sw'),
-    })
+    addServerHandler({ route: '/__nuxt_content/studio', handler: runtime('./server/routes/admin') })
+    // Register meta route for studio
+    addServerHandler({ route: '/__nuxt_content/studio/meta', handler: runtime('./server/routes/meta') })
+    addServerHandler({ route: '/sw.js', handler: runtime('./server/routes/sw') })
     // addServerHandler({
     //   route: '/__nuxt_content/studio/auth/google',
     //   handler: runtime('./server/routes/auth/google.get'),

src/module/src/runtime/composables/useMeta.ts

@@ -8,8 +8,9 @@ export const useHostMeta = createSharedComposable(() => {
 
   async function fetch() {
     // TODO: look into this approach and consider possible refactors
-    const data = await $fetch<{ components: ComponentMeta[] }>('/__preview.json')
-      .catch(() => ({ components: [] }))
+    const data = await $fetch<{ components: ComponentMeta[] }>('/__nuxt_content/studio/meta', {
+      headers: { 'content-type': 'application/json' },
+    }).catch(() => ({ components: [] }))
 
     componentsMeta.value = data.components || []
   }

src/module/src/runtime/host.ts

@@ -1,10 +1,10 @@
 import { ref } from 'vue'
 import { ensure } from './utils/ensure'
-import type { CollectionItemBase, DatabaseAdapter } from '@nuxt/content'
+import type { CollectionItemBase, CollectionSource, DatabaseAdapter } from '@nuxt/content'
 import type { ContentDatabaseAdapter } from '../types/content'
 import { getCollectionByFilePath, generateIdFromFsPath, createCollectionDocument, generateRecordDeletion, generateRecordInsert, getCollectionInfo } from './utils/collection'
-import { kebabCase } from 'lodash'
-import type { UseStudioHost, StudioHost, StudioUser, DatabaseItem, MediaItem, Repository } from 'nuxt-studio/app'
+import { kebabCase } from 'scule'
+import type { StudioHost, StudioUser, DatabaseItem, MediaItem, Repository } from 'nuxt-studio/app'
 import type { RouteLocationNormalized, Router } from 'vue-router'
 import { generateDocumentFromContent } from './utils/content'
 // @ts-expect-error queryCollection is not defined in .nuxt/imports.d.ts
@@ -29,12 +29,6 @@ function getSidebarWidth(): number {
   return sidebarWidth
 }
 
-declare global {
-  interface Window {
-    useStudioHost: UseStudioHost
-  }
-}
-
 // TODO: Move styles and these logics out of host (Maybe have a injectCSS util in host)
 function getHostStyles(): Record<string, Record<string, string>> & { css?: string } {
   const currentWidth = getSidebarWidth()
@@ -91,7 +85,14 @@ export function useStudioHost(user: StudioUser, repository: Repository): StudioH
   }
 
   function useContentCollections() {
-    return useContent().collections
+    return Object.fromEntries(
+      Object.entries(useContent().collections).filter(([, collection]) => {
+        if (!collection.source.length || collection.source.some((source: CollectionSource) => source.repository || (source as unknown as { _custom: boolean })._custom)) {
+          return false
+        }
+        return true
+      }),
+    )
   }
 
   function useContentCollectionQuery(collection: string) {

src/module/src/runtime/server/routes/meta.ts

@@ -0,0 +1,55 @@
+import type { ComponentMeta } from 'vue-component-meta'
+import { eventHandler, useSession } from 'h3'
+import type { RuntimeConfig } from '@nuxt/content'
+import { useRuntimeConfig, useAppConfig, createError } from '#imports'
+// @ts-expect-error import does exist
+import components from '#nuxt-component-meta/nitro'
+import { collections, gitInfo, appConfigSchema } from '#content/preview'
+
+interface NuxtComponentMeta {
+  pascalName: string
+  filePath: string
+  meta: ComponentMeta
+  global: boolean
+}
+
+export default eventHandler(async (event) => {
+  const session = await useSession(event, {
+    name: 'content-studio-session',
+    password: useRuntimeConfig(event).contentStudio?.auth?.sessionSecret,
+  })
+
+  if (!session?.data?.user) {
+    throw createError({
+      statusCode: 404,
+      message: 'Not found',
+    })
+  }
+
+  const mappedComponents = (Object.values(components) as NuxtComponentMeta[])
+    .map(({ pascalName, filePath, meta }) => {
+      return {
+        name: pascalName,
+        path: filePath,
+        meta: {
+          props: meta.props,
+          slots: meta.slots,
+          events: meta.events,
+        },
+      }
+    })
+
+  const appConfig = useAppConfig()
+  const runtimeConfig = useRuntimeConfig()
+  const { content } = runtimeConfig
+  const { version } = content as RuntimeConfig['content']
+
+  return {
+    version,
+    gitInfo,
+    collections,
+    appConfigSchema,
+    appConfig,
+    components: mappedComponents,
+  }
+})

src/module/src/runtime/utils/content.ts

@@ -12,7 +12,7 @@ import type { MDCElement } from '@nuxtjs/mdc'
 import type { MarkdownRoot } from '@nuxt/content'
 
 export function removeReservedKeysFromDocument(document: DatabaseItem) {
-  const result = omit(document, ['id', 'stem', 'extension', '__hash__', 'path', 'body', 'meta'])
+  const result = omit(document, ['id', 'stem', 'extension', '__hash__', 'path', 'body', 'meta', 'rawbody'])
   // Default value of navigation is true, so we can safely remove it
   if (result.navigation === true) {
     Reflect.deleteProperty(result, 'navigation')