Binding (frontmatter + data)

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

Select a file to view its contents

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.

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 }}.

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.