diff --git a/docs/content/2.usage/2.markdown.md b/docs/content/2.usage/2.markdown.md index 63e82864a..50fe980d0 100755 --- a/docs/content/2.usage/2.markdown.md +++ b/docs/content/2.usage/2.markdown.md @@ -458,6 +458,45 @@ In addition to mdc components and `span`, attribute syntax will work on images, :: :: +## Binding Data in Markdown + +You can bind data within your Markdown document using the `{{ $doc.variable }}` syntax. These values can be defined in the YAML front matter at the top of the document, within each MDC component, or injected using the `data` prop of the `` component. + +### Example 1: Define in YAML + +```md +--- +title: 'Title of the page' +description: 'meta description of the page' +customVariable: 'Custom Value' +--- + +# The Title is {{ $doc.title }} and customVariable is {{ $doc.customVariable }} + +``` + +### Example 2: Define in external with `` + +```html + + + +``` + +```md + +# Hello {{ $doc.name }} + +``` + ## Prose Components In Nuxt Content, the prose represents HTML tags generated by the Markdown syntax, such as title levels and links. diff --git a/docs/content/4.components/2.content-renderer.md b/docs/content/4.components/2.content-renderer.md index 0ab2bcc06..d935a4642 100644 --- a/docs/content/4.components/2.content-renderer.md +++ b/docs/content/4.components/2.content-renderer.md @@ -23,6 +23,9 @@ Other types will currently be passed to default slot via `v-slot="{ data }"` or - `components`: The map of custom components to use for rendering. This prop will pass to markdown renderer and will not affect other file types. - Type: `object` - Default: `{}` +- `data`: A map of variables to inject into the markdown content for later use in binding variables. + - Type: `object` + - Default: `{}` ## Slots