# Binding (frontmatter + data)

> Example showing how to interpolate frontmatter and runtime data into Markdown using the Comark `binding` plugin in Vue and Vite.

<code-explorer org="comarkdown" repo="comark" path="examples/3.plugins/vue-vite-binding" defaultValue="src/App.vue">



</code-explorer>

## Features

This example demonstrates the Comark `binding` plugin in a Vue + Vite app:

- **{{ path }} shorthand** — interpolate values from frontmatter, the renderer's `data` prop, or a parent component's `props` directly in your markdown.
- **|| default fallback** — supply an inline default rendered when the dot-path doesn't resolve.
- **Parent props** — nested components can reference their enclosing component's resolved attributes via `props.`.
- **Typed values** — bindings come through as real JS values (strings, numbers, objects) thanks to the shared data-binding layer.

## Usage

1. Import the plugin and its matching Vue component:

```ts
code,[object Object],span,[object Object],span,[object Object],import,span,[object Object], binding,span,[object Object],,,span,[object Object], {,span,[object Object], Binding,span,[object Object], },span,[object Object], from,span,[object Object], ',span,[object Object],@comark/vue/plugins/binding,span,[object Object],'
```
2. Wire them into `<Comark>`:

```vue
code,[object Object],span,[object Object],span,[object Object],<,span,[object Object],Comark,
,span,[object Object],span,[object Object],  :,span,[object Object],markdown,span,[object Object],=,span,[object Object],",span,[object Object],markdown,span,[object Object],",
,span,[object Object],span,[object Object],  :,span,[object Object],plugins,span,[object Object],=,span,[object Object],",span,[object Object],[,span,[object Object],binding,span,[object Object],()],span,[object Object],",
,span,[object Object],span,[object Object],  :,span,[object Object],components,span,[object Object],=,span,[object Object],",span,[object Object],{,span,[object Object], Binding ,span,[object Object],},span,[object Object],",
,span,[object Object],span,[object Object],  :,span,[object Object],data,span,[object Object],=,span,[object Object],",span,[object Object],data,span,[object Object],",
,span,[object Object],span,[object Object],/>
```
3. Use `{{ path || default }}` anywhere in your markdown:

```markdown
code,[object Object],span,[object Object],span,[object Object],---,
,span,[object Object],span,[object Object],release,span,[object Object],:,
,span,[object Object],span,[object Object],  version,span,[object Object],:,span,[object Object], 2.5.1,
,span,[object Object],span,[object Object],---,
,span,[object Object],
,span,[object Object],span,[object Object],Hello, ,span,[object Object],{{,span,[object Object], data.user.name ,span,[object Object],||,span,[object Object], friend,span,[object Object], }},span,[object Object], — you are on v,span,[object Object],{{,span,[object Object], frontmatter.release.version ,span,[object Object],}},span,[object Object],.
```

## Namespaces

Bindings resolve against four namespaces:

<table>
<thead>
  <tr>
    <th>
      Namespace
    </th>
    
    <th>
      Source
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        frontmatter
      </code>
    </td>
    
    <td>
      The document's YAML frontmatter
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        meta
      </code>
    </td>
    
    <td>
      Plugin-populated metadata on the parsed tree
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        data
      </code>
    </td>
    
    <td>
      The <code>
        data
      </code>
      
       prop passed to <code>
        <Comark>
      </code>
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        props
      </code>
    </td>
    
    <td>
      Props of the enclosing Comark component
    </td>
  </tr>
</tbody>
</table>

See the [Binding plugin docs](/plugins/built-in/binding) and the [data binding contract](/syntax/components#data-binding) for the full reference.