From 6f1d8ad2c2fe185efe7a3fa701580e5656da48b5 Mon Sep 17 00:00:00 2001
From: Maxime Pauvert <maximepvrt@gmail.com>
Date: Mon, 2 Oct 2023 11:42:04 +0200
Subject: [PATCH] docs: add variables binding

---
 docs/content/2.usage/2.markdown.md | 39 ++++++++++++++++++++++++++++++
 1 file changed, 39 insertions(+)

diff --git a/docs/content/2.usage/2.markdown.md b/docs/content/2.usage/2.markdown.md
index 63e82864a..0c1c500be 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 `<ContentRendererMarkdown>` 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 `<ContentRendererMarkdown>` 
+
+```html
+<template>
+  <div>
+    <ContentRendererMarkdown :value="data" :data="mdcVars"/>
+    <button type="button" v-on:click="mdcVars.name = 'Hugo'">Change name</button>
+  </div>
+</template>
+
+<script setup lang="ts">
+const { data } = await useAsyncData(() => queryContent('test').findOne());
+const mdcVars = ref({ name: 'Maxime'});
+</script>
+```
+
+```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.