---
title: "Inherit Schema from a Vue Component"
description: "Reuse a Vue component's props as part of your collection schema using property().inherit()."
canonical_url: "https://content.nuxt.com/docs/collections/inherit-schema-from-component"
---
# Inherit Schema from a Vue Component

> 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, property } from '@nuxt/content'
import { z } from 'zod'

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.

</tip>


## Sitemap

See the full [sitemap](https://content.nuxt.com/sitemap.md) for all pages.