Binding (frontmatter + data)

Source Open in StackBlitz

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

App.vue

<script setup lang="ts">
import { reactive } from 'vue'
import { Comark } from '@comark/vue'
import binding, { Binding } from '@comark/vue/plugins/binding'

// Runtime data exposed to bindings via the `data.` namespace.
const data = reactive({
  user: {
    name: 'Ada',
    role: 'admin',
  },
  stats: {
    users: 1200,
    uptime: '99.9%',
  },
})

const markdown = `---
release:
  version: 2.5.1
  codename: Firefly
---

# {{ frontmatter.release.codename || Unnamed }} — v{{ frontmatter.release.version }}

Hello **{{ data.user.name || friend }}** (role: {{ data.user.role }}), welcome back!

## Platform stats

| Metric | Value                            |
| ------ | -------------------------------- |
| Users  | {{ data.stats.users }}           |
| Uptime | {{ data.stats.uptime }}          |
| Plan   | {{ data.plan \\|\\| community }}     |

## Components see their own props

::card{title="Component props"}
Inside the card the binding below pulls the card's title via \`props\`:

{{ props.title }}
::
`
</script>

<template>
  <Suspense>
    <Comark
      :markdown="markdown"
      :plugins="[binding()]"
      :components="{ Binding }"
      :data="data"
    />
  </Suspense>
</template>

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

Import the plugin and its matching Vue component:

import binding, { Binding } from '@comark/vue/plugins/binding'

Wire them into <Comark>:

<Comark
  :markdown="markdown"
  :plugins="[binding()]"
  :components="{ Binding }"
  :data="data"
/>

Use {{ path || default }} anywhere in your markdown:

---
release:
  version: 2.5.1
---

Hello, {{ data.user.name || friend }} — you are on v{{ frontmatter.release.version }}.

Namespaces

Bindings resolve against four namespaces:

Namespace	Source
`frontmatter`	The document's YAML frontmatter
`meta`	Plugin-populated metadata on the parsed tree
`data`	The `data` prop passed to `<Comark>`
`props`	Props of the enclosing Comark component

See the Binding plugin docs and the data binding contract for the full reference.

Syntax Highlighting

Example showing how to use Comark with syntax highlighting using Shiki in Vue and Vite.