docs: add validators and property documentation

Author: farnabaz

docs/content/docs/2.collections/4.validators.md

@@ -0,0 +1,148 @@
+---
+title: Schema Validators
+navigation:
+  title: Validators
+description: Define collection schemas with your preferred validator and full type-safety.
+---
+
+Nuxt Content supports defining collection schemas with multiple validators. Out of the box, this includes popular libraries like **Zod v3 / v4** and **Valibot** (examples below). The system is extensible and can support other validators via JSON Schema adapters. Schemas enforce data consistency and drive generated types and Studio forms.
+
+## Using Zod v3
+
+
+### Install
+
+```bash
+pnpm add -D zod zod-to-json-schema
+# or
+npm i -D zod zod-to-json-schema
+```
+
+Prefer importing `z` directly from `zod`.
+
+```ts [content.config.ts]
+import { defineContentConfig, defineCollection, property } from '@nuxt/content'
+import { z } from 'zod' // or 'zod/v3' if your setup exposes this subpath
+
+export default defineContentConfig({
+  collections: {
+    blog: defineCollection({
+      type: 'page',
+      source: 'blog/*.md',
+      schema: z.object({
+        title: z.string(),
+        description: z.string().optional(),
+        date: z.date(),
+        draft: z.boolean().default(false),
+        tags: z.array(z.string()).optional(),
+        image: z.object({
+          src: property(z.string()).editor({ input: 'media' }),
+          alt: z.string()
+        })
+      })
+    })
+  }
+})
+```
+
+::note
+Dates are serialised as ISO strings under the hood (JSON Schema `format: date-time`).
+::
+
+::warning
+The `z` re-export from `@nuxt/content` is deprecated and will be removed in a future release. Import `z` from `zod` (or `zod/v3`) instead.
+::
+
+## Using Zod v4
+
+Zod v4 provides a native JSON Schema export. No `zod-to-json-schema` dependency is required.
+
+### Install
+
+```bash
+pnpm add -D zod
+# or
+npm i -D zod
+```
+
+```ts [content.config.ts]
+import { defineContentConfig, defineCollection, property } from '@nuxt/content'
+import { z } from 'zod/v4'
+
+export default defineContentConfig({
+  collections: {
+    docs: defineCollection({
+      type: 'page',
+      source: 'docs/**/*.md',
+      schema: z.object({
+        title: z.string(),
+        description: z.string().optional(),
+        updatedAt: z.date(),
+        draft: z.boolean().optional(),
+        tags: z.array(z.string()).optional(),
+        hero: z.object({
+          image: property(z.string()).editor({ input: 'media' }),
+          caption: z.string().optional()
+        })
+      })
+    })
+  }
+})
+```
+
+## Using Valibot
+
+Use Valibot primitives to define your schema.
+### Install
+
+```bash
+pnpm add -D valibot @valibot/to-json-schema
+# or
+npm i -D valibot @valibot/to-json-schema
+```
+
+```ts [content.config.ts]
+import { defineContentConfig, defineCollection, property } from '@nuxt/content'
+import { object, string, boolean, array, date, optional } from 'valibot'
+
+export default defineContentConfig({
+  collections: {
+    docs: defineCollection({
+      type: 'page',
+      source: 'docs/**/*.md',
+      schema: object({
+        title: string(),
+        description: optional(string()),
+        updatedAt: date(),
+        draft: optional(boolean()),
+        tags: optional(array(string())),
+        hero: object({
+          image: property(string()).editor({ input: 'media' }),
+          caption: optional(string())
+        })
+      })
+    })
+  }
+})
+```
+
+## Choosing a validator
+
+- **Zod v3**: battle-tested, rich ecosystem; great DX with re-exported `z`.
+- **Valibot**: lightweight and fast; bring your own importer from `valibot`.
+
+Only install and use the validator you need. Nuxt Content auto-detects supported validators that are installed.
+
+## Support for other validators
+
+Nuxt Content converts your collection schema to JSON Schema Draft-07 internally. If your preferred validator can be transformed to Draft-07 (or has a compatible adapter), it can be supported. Currently, Zod (v3 and v4) and Valibot are auto-detected. If you’d like first-class support for another validator, consider opening an issue or PR in the [Nuxt Content repository](https://github.com/nuxt/content).
+
+## Editor metadata (optional)
+
+You can enrich fields for Studio via `property(...).editor({ ... })` with both validators. See the Studio docs for mapping details.
+
+::tip{to="/docs/studio/content"}
+Learn how editor metadata maps to form inputs in Studio.
+::
+
+

docs/content/docs/2.collections/5.inherit-schema-from-component.md

@@ -0,0 +1,51 @@
+---
+title: Inherit Schema from a Vue Component
+navigation:
+  title: Inherit from component
+description: Reuse a Vue component's props as part of your collection schema using property().inherit().
+---
+
+You can reuse a Vue component's props as part of your collection schema. This helps keep your content model aligned with your UI, reduces duplication, and prevents drift.
+
+## How it works
+
+Nuxt Content provides a `property()` helper that augments your validator and adds the following utility:
+
+- **inherit(path)**: replace the current object schema with the props JSON Schema inferred from a Vue component at `path`
+
+Under the hood, Nuxt Content reads the component's props (via `nuxt-component-meta`) and converts them to JSON Schema, then merges them into your collection schema.
+
+## Example
+
+```ts [content.config.ts]
+import { defineContentConfig, defineCollection, z, property } from '@nuxt/content'
+
+export default defineContentConfig({
+  collections: {
+    pages: defineCollection({
+      type: 'page',
+      source: '**/*.md',
+      schema: z.object({
+        // Reuse props from a local component
+        hero: property(z.object({})).inherit('app/components/HeroSection.vue'),
+
+        // Reuse props from a dependency (path is resolved like an import)
+        button: property(z.object({})).inherit('@nuxt/ui/components/Button.vue')
+      })
+    })
+  }
+})
+```
+
+## Notes
+
+- The argument to `inherit()` is resolved like a module path. You can pass a relative path from project root or a package path.
+- `inherit()` expects to be used on an object field (e.g., `property(z.object({}))`).
+- Nested usage is supported: you can place inherited objects inside other objects and arrays; Nuxt Content recursively replaces `$content.inherit` markers.
+- If the component cannot be resolved, the schema falls back to the original object definition.
+
+::tip
+Pair `inherit()` with `editor(...)` for better Studio forms if you need custom inputs on top of the component's props.
+::
+
+