feat(config): provide defineContentConfig utility (#2891)

Author: ineshbose

docs/content.config.ts

@@ -1,24 +1,26 @@
-import { defineCollection, z } from '@nuxt/content'
+import { defineContentConfig, defineCollection, z } from '@nuxt/content'
 
-export const collections = {
-  docs: defineCollection({
-    type: 'page',
-    source: 'docs/**',
-    schema: z.object({
-      links: z.array(z.object({
-        label: z.string(),
-        icon: z.string(),
-        avatar: z.object({
-          src: z.string(),
-          alt: z.string(),
-        }).optional(),
-        to: z.string(),
-        target: z.string().optional(),
-      })).optional(),
+export default defineContentConfig({
+  collections: {
+    docs: defineCollection({
+      type: 'page',
+      source: 'docs/**',
+      schema: z.object({
+        links: z.array(z.object({
+          label: z.string(),
+          icon: z.string(),
+          avatar: z.object({
+            src: z.string(),
+            alt: z.string(),
+          }).optional(),
+          to: z.string(),
+          target: z.string().optional(),
+        })).optional(),
+      }),
     }),
-  }),
-  home: defineCollection({
-    type: 'page',
-    source: 'index.md',
-  }),
-}
+    home: defineCollection({
+      type: 'page',
+      source: 'index.md',
+    }),
+  },
+})

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

@@ -40,14 +40,16 @@ export default defineNuxtConfig({
 Create a `content.config.ts` file in your project root directory:
 
 ```ts [content.config.ts]
-import { defineCollection } from '@nuxt/content'
-
-export const collections = {
-  content: defineCollection({
-    type: 'page',
-    source: '**/*.md'
-  })
-}
+import { defineContentConfig, defineCollection } from '@nuxt/content'
+
+export default defineContentConfig({
+  collections: {
+    content: defineCollection({
+      type: 'page',
+      source: '**/*.md'
+    })
+  }
+})
 ```
 
 This configuration creates a default `content` collection that processes all Markdown files located in the `content` folder of your project. You can customize the collection settings based on your needs.

docs/content/index.md

@@ -317,20 +317,22 @@ orientation: horizontal
   ```
 
   ```ts [content.config.ts]
-  import { defineCollection, z } from '@nuxt/content'
+  import { defineContentConfig, defineCollection, z } from '@nuxt/content'
 
-  export const collections = {
-    blog: defineCollection({
-      source: 'blog/*.md',
-      type: 'page',
-      // Define custom schema for docs collection
-      schema: z.object({
-        tags: z.array(z.string()),
-        image: z.string(),
-        date: z.Date()
+  export default defineContentConfig({
+    collections: {
+      blog: defineCollection({
+        source: 'blog/*.md',
+        type: 'page',
+        // Define custom schema for docs collection
+        schema: z.object({
+          tags: z.array(z.string()),
+          image: z.string(),
+          date: z.Date()
+        })
       })
-    })
-  }
+    }
+  })
   ```
   :::
 

examples/basic/content.config.ts

@@ -1,8 +1,10 @@
-import { defineCollection } from '@nuxt/content'
+import { defineContentConfig, defineCollection } from '@nuxt/content'
 
-export const collections = {
-  content: defineCollection({
-    type: 'page',
-    source: '**',
-  }),
-}
+export default defineContentConfig({
+  collections: {
+    content: defineCollection({
+      type: 'page',
+      source: '**',
+    }),
+  },
+})

playground/content.config.ts

@@ -1,4 +1,4 @@
-import { defineCollection, z } from '@nuxt/content'
+import { defineContentConfig, defineCollection, z } from '@nuxt/content'
 
 const content = defineCollection({
   type: 'page',
@@ -42,7 +42,7 @@ const pages = defineCollection({
   source: 'pages/**',
 })
 
-export const collections = {
+const collections = {
   content,
   data,
   pages,
@@ -77,3 +77,5 @@ export const collections = {
     },
   }),
 }
+
+export default defineContentConfig({ collections })

src/utils/config.ts

@@ -1,12 +1,16 @@
 import { stat } from 'node:fs/promises'
-import { loadConfig } from 'c12'
+import { loadConfig, createDefineConfig } from 'c12'
 import type { Nuxt } from '@nuxt/schema'
 import { join } from 'pathe'
-import type { ResolvedCollection } from '../types'
+import type { ResolvedCollection, DefinedCollection } from '../types'
 import { defineCollection, resolveCollections } from './collection'
 import { logger } from './dev'
 
-const defaultConfig = {
+type NuxtContentConfig = {
+  collections: Record<string, DefinedCollection>
+}
+
+const defaultConfig: NuxtContentConfig = {
   collections: {
     content: defineCollection({
       type: 'page',
@@ -15,8 +19,14 @@ const defaultConfig = {
   },
 }
 
+export const defineContentConfig = createDefineConfig<NuxtContentConfig>()
+
 export async function loadContentConfig(rootDir: string, opts: { defaultFallback?: boolean } = {}) {
-  const { config, configFile } = await loadConfig({ name: 'content', cwd: rootDir })
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  (globalThis as any).defineContentConfig = (c: any) => c
+  const { config, configFile } = await loadConfig<NuxtContentConfig>({ name: 'content', cwd: rootDir })
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  delete (globalThis as any).defineContentConfig
 
   if ((!configFile || configFile === 'content.config') && opts.defaultFallback) {
     logger.warn('`content.config.ts` is not found, falling back to default collection. In order to have full control over your collections, create the config file in project root. See: https://content.nuxt.com/getting-started/installation')

src/utils/index.ts

@@ -1,3 +1,4 @@
 export { metaSchema, pageSchema } from './schema'
 export { defineCollection } from './collection'
+export { defineContentConfig } from './config'
 export { z } from './zod'