Inherit Schema from a Vue Component

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

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.